3-事件处理/委托/冒泡 标签默认行为 自动触发事件 自定义事件和取消

事件处理

  • 方法
    1. jQ().事件类型(callback): 当指定标签中注册事件被触发时, 会执行回调函数中的代码
    2. jQ().on(事件类型, [obj],callback)
  • 事件回调函数中的缺省参数-事件对象
    • 我们可以根据事件对象来获取更详细的信息
    • type: 事件的类型
    • target: 事件作用的对象
    • data: 传递对象参数给回调函数的 event.data //on事件中的obj对象
  • 给标签添加多个事件(可以是相同类型的), 不会覆盖

事件委托

  • jQ对象.on(type, selector, callback)
  • 参数
    • type: 事件类型
    • selector: 给谁注册事件(选择器)
    • callback: 事件发生后的回调函数
  • 优点
    • 给尚不存在的标签(在注册事件的时候,标签还没有生成)添加事件类型
    • 可以提高性能

事件冒泡

  • 定义: 子标签和父标签身上如果注册了相同类型的事件,那么子标签的事件被触发的时候,父标签的事件也会被触发,而且它是层层向上触发的
  • 阻止事件冒泡方法
    • 对应标签返回false: return false
    • 使用事件对象的方法: e.stopPropagation();
  • 注意: 阻止冒泡是只会阻止当层向上冒泡
  • on(onclick)执行事件特点: 如果多次执行,会覆盖掉之前的执行,只保留最后一次
    • element.addEventListener(event, function, true): 所有的事件都会被触发,遵循的是冒泡规律(第三个参数改为false就是先捕获父亲事件)

标签的默认行为

  • form(默认提交表单)等标签有一些默认行为, a标签默认行为在点击后会跳转到链接的地址, 如果类似的标签, 再给他们注册点击事件等, 那么会触发多个动作
  • 阻止标签的默认行为
    • 事件对象.preventDefault

自动触发事件方法(点击事件)

  1. jQ().trigger(type)
    • 作用于对象(事件对象.target): jQ实例对象中所有的标签
    • 不会阻止事件冒泡
      • 作用于a标签, 阻止标签的默认(跳转)行为
      • 作用于表单, 不会阻止表单的默认(提交)行为
  2. jQ().triggerHandler(type)
    • 作用于对象: jQ实例对象中第一个标签
    • 默认会阻止事件冒泡
    • 会阻止标签的默认事件(form等部分标签)
      • 作用于a标签, 阻止标签的默认(跳转)行为
      • 作用于表单, 会阻止表单的默认(提交)行为

自定义事件/取消事件

  • 自定义事件: 可以给标签添加任意事件类型
    • 自动触发

         $('button').on('xx',function(){
            console.log(11);
        })      
        $('button').triggle('xx');
      
  • 取消事件: jQ().off(type,[fn])
    • 参数
      • type: 事件类型
      • fn: 可选. 过滤特定事件(对象身上可能添加了多个事件, 取消选中的特定事件)

DOM操作常见方法

  1. remove(); 删除操作 - 把选定标签删除掉(包括该标签)

  2. empty(); 清空操作 - 把选定标签的内容删除(子标签及其文本)

  3. clone() 克隆操作 - 把已有的内容复制一份

    • 默认情况下, 克隆标签时, 不会克隆事件
    • 若想克隆事件, 传入一个参数true
  4. replaceWith() 替换 - 用新内容替换当前的标签(传值: 标签/jQ对象)

  5. after() | insertAfter 被选元素后插入指定的内容 | 插入内容到标签后面

  6. before() | insertBefore 被选元素前插入指定的内容 | 插入内容到标签前面

  7. append() | appendTo() 插入到标签内容的后面 | 把内容插入到标签内容的后面

     <p>paragraph.</p>
     //6. 被选元素(p标签)前插入指定的内容 | 把内容插入到p标签前面
     $("p").before("<p>Hello world!</p>");
     $("<span>你好!</span>").insertBefore("p");
     
     //7. 在P标签内容后插入内容 | 把内容插入到p标签内容的后面 - 都显示paragraph.Hello World!
     $("p").append(" <b>Hello world!</b>");  
     $("<b> Hello World!</b>").appendTo("p");    
    
  8. prepend() | prependTo() 插入到标签内容的前面 | 把内容插入到标签内容的前面

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 2,920评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 131,686评论 18 138
  • 13.1 事件流 “DOM2级事件”规定事件流包括3个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。事件捕获表示...
    Elevens_regret阅读 275评论 0 0
  • 这个问题也是老生常谈了,写这篇文章的主要目的是进行下梳理,了解自己知识点的掌握程度,也希望对大家有所帮助。 在说如...
    一木_qintb阅读 3,699评论 1 4
  • 一直在思考,对于我们浑浑噩噩过日的凡人来说,到底应该做点什么才会对将来一定有用。想了好久,也想不出个所以然。可能是...
    大虾很忙阅读 463评论 4 3
  • 步虚词_阅读 133评论 1 0