JS事件模型(事件流/事件模型/事件委托/事件监听)

事件

javascript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性， 常见的有加载事件、鼠标事件、自定义事件等

事件流

由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流的概念

事件流都会经历三个阶段：

• 事件捕获阶段(capture phase)(事件委托)
• 处于目标阶段(target phase)
• 事件冒泡阶段(bubbling phase) 

        

  使用stopPropagation()来阻止冒泡事件

addEventListener()可以控制事件顺序的优点，既在addEventListener()里添加一个参数false（执行冒泡）或者true（执行捕获），addEventListener()默认为false

  

事件模型

原始事件模型

(1)在html中直接绑定

<input type="button" onclick="fun()">
    

(2)通过JS代码绑定

var btn = document.getElementById('.btn');
btn.onclick = fun;

特性

绑定速度快

DOM0级事件具有很好的跨浏览器优势，会以最快的速度绑定，但由于绑定速度太快，可能页面还未完全加载出来，以至于事件可能无法正常运行

• 只支持冒泡，不支持捕获

• 同一个类型的事件只能绑定一次

标准事件模型

在该事件模型中，一次事件共有三个过程:捕获/处理/冒泡

事件绑定监听函数的方式如下:

addEventListener(eventType, handler, useCapture)

事件移除监听函数的方式如下:

removeEventListener(eventType, handler, useCapture)

参数如下：

• eventType指定事件类型(不要加on)
• handler是事件处理函数
• useCapture是一个boolean用于指定是否在捕获阶段进行处理，一般设置为false与IE浏览器保持一致

特性

• 可以在一个DOM元素上绑定多个事件处理器，各自并不会冲突

btn.addEventListener(‘click’, showMessage1, false);
btn.addEventListener(‘click’, showMessage2, false);
btn.addEventListener(‘click’, showMessage3, false);

• 执行时机

    当第三个参数(useCapture)设置为true就在捕获过程中执行，反之在冒泡过程中执行处理函数

 

IE事件模型

IE事件模型共有两个过程:

• 事件处理阶段：事件到达目标元素, 触发目标元素的监听函数。
• 事件冒泡阶段：事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行

事件绑定监听函数的方式如下:

attachEvent(eventType, handler)

事件移除监听函数的方式如下:

detachEvent(eventType, handler)

举个例子：

var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);

 事件委托

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

 我要给上面的li绑定一个点击事件,有两种方法:一种是给每一个li绑定事件,一种是利用事件委托进行绑定

• 给每个li绑定事件:

  let lis = document.querySelectorAll('li')
    for (let i = 0; i < lis.length; i++) {
      lis[i].addEventListener('click', function () {
        console.log(1);
      })
    }

• 事件委托进行绑定

    var list = document.querySelector('ul')
    list.addEventListener('click', function (e) {
      if (e.target.tagName === 'LI') {
        console.log(e.target.innerText)
      }
    })

 事件监听  addEventListener()

1. element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。

2. addEventListener() 可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则。

3. addEventListener() 在绑定事件的时候，事件名称之前不需带 on 。

4. 注意该方法的兼容性，如果要兼容 IE6-8 ，不能使用该方法，可以采用以下方法。

5. 可以使用 removeEventListener() 来移除之前绑定过的事件。