事件绑定方式

事件绑定方式

• DOM0级

  • 绑定

    • 元素.on事件类型 = 事件函数
    • 只能够绑定一个事件 因为它是对属性进行赋值

  • 移除

    • 元素.on事件类型 = null

我们都知道，一个对象的属性只能够保存一个值。 如果对一个对象属性进行多次赋值，后面赋值的属性会替换掉前面的属性

• DOM2级

  • 绑定

    • dom.addEventListener(type, handler, boolean)
      • type: 事件类型字符串 不带on
      • handler: 事件处理函数
      • boolean: 布尔值 决定绑定到捕获阶段还是冒泡阶段 默认是false false表示冒泡

  • 结论： 可以通过addEventListener方法进行多个事件函数的绑定 执行时是按照代码的书写顺序执行 因为代码的书写顺序决定了绑定顺序

  • 移除

    • document.removeEventListener(type, handler, boolean);
      • type: 事件类型字符串 不带on
      • handler: 事件处理函数 一定要保证函数地址是绑定的那个
      • boolean: 布尔值 决定移除的是捕获阶段还是冒泡阶段 默认是false false表示冒泡

  • 结论： 第二个参数是要移除的函数 函数是引用类型 引用类型的比较的是地址 所以一定要保证 移除的函数是当初绑定的那个函数本身

• IE中的高级绑定方式(非DOM2级)

IE中没有实现DOM2级

• 绑定方式：
  • dom.attachEvent(type, handler);
    • type: 事件类型字符串 带on
    • handler: 事件处理函数
    • 没有第三个参数 意味着不能够绑定到捕获阶段
      特点: 可以对同一个元素绑定多个同类型事件的处理函数 执行起来是倒着执行 先绑定的后执行 后绑定的先执行
• 移除方式：
  • dom.detachEvent(type, handler);
    • type: 事件类型字符串 带on
    • handler: 事件处理函数 要注意函数的地址问题

事件流程

• 事件冒泡：当点击时 事件从最精确的元素 一层一层往上触发 直到最顶层元素 这个过程叫做事件冒泡
• 事件捕获：当点击时 事件从最顶层元素 一层一层的往下触发 直到最精确元素 这个过程叫做事件捕获
  • 最精确元素： 鼠标点到谁 谁就是最精确元素
  • 最顶层元素：
    • 高级浏览器 最顶层元素是window
    • IE中 最顶层元素是 document

阻止冒泡

• 高级浏览器中 可以通过e.stopPropagation() 进行阻止事件的冒泡

      // 高级浏览器中
      // box1是box2的父元素
      var box1 = document.querySelector(".box1");
      var box2 = document.querySelector(".box2");
  
      box1.onclick = function() {
          console.log("这是BOX1");
      }
      box2.onclick = function(e) {
          e.stopPropagation();
          console.log("这是BOX2");
      }
  

• IE浏览器中 可以通过e.cancelBubble = true 进行阻止事件的冒泡

     // IE浏览器中
     // box1是box2的父元素
     var box1 = document.querySelector(".box1");
     var box2 = document.querySelector(".box2");
  
     box1.onclick = function() {
         console.log("这是BOX1");
     }
     box2.onclick = function(e) {
         var e = e || window.event;
         e.cancelBubble = true;
         console.log("这是BOX2");
     }
  

停止默认行为

浏览器的一些事件中，带有一些默认行为 比如a标签的点击事件中 会带有跳转页面的行为 表单的点击事件中 带有提交的默认行为 滚轮事件中 带有改变页面卷动值的默认行为

• 高级浏览器中 可以通过 e.preventDefault() 阻止默认行为

      // 获取元素
      var a = document.getElementsByTagName("a")[0];
      // 设置点击事件
      a.addEventListener("click", function(e) {
          console.log("点击了a标签1111");
          e.preventDefault();
      }, false);
  

• IE浏览器中 可以通过 e.returnValue = true; 阻止默认行为

      // 获取元素
      var a = document.getElementsByTagName("a")[0];
      // 设置点击事件
      a.attachEvent("onclick", function(e) {
          console.log("点击了a标签1111");
          e.returnValue = true;
      });
  

• DOM0级事件绑定方式中，可以通过return false进行阻止默认行为

     // 获取元素
     var a = document.getElementsByTagName("a")[0];
     // 设置点击事件
     a.onclick = function() {
         return false;
     }