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() 插入到标签内容的前面 | 把内容插入到标签内容的前面