【前端知识总结】DOM事件

DOM事件的级别

DOM事件的级别，准确来说，是DOM标准定义的级别。包括：

• DOM0的写法：

  element.onclick = function () {}

上边的代码是在js中的写法，如果要在HTML中写，写法是在onclick属性中，写js语句。

• DOM2的写法：

element.addEventListener('click', function() {}, false);

【重要】：上边的第三个参数，true表示事件在捕获阶段出发，false表示事件在冒泡阶段触发（默认）。如果不写，则默认为false。

• DOM3的写法：

element.addEventListener('keyup', function(){}, false)

DOM3中，增加了很多事件类型，比如鼠标事件、键盘事件等。
PS:为何事件没有DOM1的写法呢？因为DOM1标准制定的时候，没有涉及与事件相关的内容。

DOM事件模型

DOM事件模型讲的就是捕获和冒泡。

• 捕获：从上往下。
• 冒泡：从下（目标元素）往上。

DOM事件流

DOM事件流讲的就是：浏览器在与当前页面做交互时，这个事件是怎么传递到页面上的。

• 完整的事件流，分三个阶段：

  1. 捕获：从window对象传到目标元素；
  2. 目标阶段：事件通过捕获，到达目标元素，这个阶段就是目标阶段；
  3. 冒泡：从目标元素传到window对象。
     

• 描述DOM事件捕获的具体流程

  • 捕获的流程：
    
  • 说明：捕获阶段，事件依次传递的顺序是：window -> document -> html -> body -> 父元素、子元素、目标元素。
    代码如下：

window.addEventListener('click', function() {
  alert('捕获 window');
}, true);
document.addEventListener('click', function() {
  alert('捕获 document');
}, true);
document.documentElement.addEventListener('click', function() {
  alert('捕获 html');
}, true);
document.body.addEventListener('click', function() {
  alert('捕获 body');
}, true);
fatherBox.addEventListener('click', function() {
  alert('捕获 father');
}, true);
childBox.addEventListener('click', function() {
  alert('捕获 child');
}, true);

• 在js中，获取body节点：document.body；获取html节点：document.documentElement

• 冒泡的流程：与捕获的流程相反。

• Event对象常见的api方法

  • 方法1；阻止默认事件
    event.preventDefault();
  • 方法2：阻止冒泡
    • w3c的方法（火狐、谷歌、IE11）
      event.stopPropagation();
    • IE10以下则是：
      event.cancelBubble = true;

  兼容代码如下：

  box.onclick = function (event) {
      alert('child');
      // 阻止冒泡
      event = event || window.event;
      if (event && event.stopPropagation) {
          event.stopPropagation();
      } else {
          event.cancelBubble = true;
      }
  }
  

  • 方法3：设置事件优先级
    event.stopImmediatePropagation();
    这个方法的解释如下：

  比如说，我用addEventListener给某按钮同时注册了事件A、事件B。此时，如果我单击按钮，就会依次执行事件A和事件B。现在要求：单击按钮时，只执行事件A，不执行事件B。该怎么做呢？这是时候，就可以用到stopImmediatePropagation方法了。做法是：在事件A的响应函数中加入这句话。

  • 属性4、属性5（事件委托中使用）

  event.currentTarget // 当前所绑定的事件对象。在事件委托中，指的是【父元素】。
  event.target // 当前被点击的元素，在事件委托中，指的是【子元素】。
  

自定义事件

• 代码如下：

  var myEvent = new Event('clickTest');
  element.addEventListener('clickTest', function () {
      console.log('触发了clickTest事件')
  })
  // 元素注册事件
  element.dispatchEvent(myEvent); //注意：参数是写事件对象myEvent，不是写事件名
  

• 上面这个事件是定义完了之后，就直接自动触发了。在正常的业务中，这个事件一般是和别的事件结合使用的，比如延时器设置按钮的动作

  var myEvent = new Event('clickTest');
  element.addEventListener('clickTest', function () {
    console.log('触发了clickTest事件')
  });
  setTimeout(function () {
        element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
  }, 1000);