js事件机制 相关

JavaScript 事件机制描述的是事件在 DOM 里面的传递顺序，以及我们可以对这些事件做出如何的响应

一、事件监听：
事件监听函数：
addEventListener（ 事件名，callback，监听阶段）用于向指定元素添加事件句柄。
第三个参数值为布尔型，当处于事件捕获阶段监听为true，冒泡阶段监听为false。

移除事件监听：
removeEventListener（事件名，callback，监听阶段）
需要注意的是，绑定事件时的回调函数不能是匿名函数，必须是一个声明的函数，因为解除事件绑定时需要传递这个回调函数的引用，才可以断开绑定。

e.preventDefault() 不管是在捕获阶段还是在冒泡阶段，只要使用了 preventDefault 方法，即可取消默认行为的执行
。

二、事件顺序
Dom2 级事件模型： 事件捕获阶段-——>目标阶段——> 事件冒泡阶段

补充：
DOM0 级事件：

// 页面存在一个btn按钮，给btn添加一i个点击事件
btn.onclick = function(){
   console.log('this is a click event')
}

事件就是用户或浏览器自身执行的某种操作，如click、load、mouseover等，都是事件的名字，而响应某个事件的函数就被称为事件处理程序。

DOM2 级事件：
用addEventListener（）和removeEventListener（）来添加和移除事件处理程序，所有的DOM节点中都包含这两个方法。
————————————————————————————————————————————

事件执行顺序：
若以onclick的方式绑定，对同一元素重复绑定，后面会覆盖前面的，但是以addEventListener绑定的，同一元素绑定多少次会执行多少次。
先绑定先执行，同一元素，Dom中直接用onclick ，onclick的绑定早于addEventListener

三、事件委托

事件流分为三个部分：事件捕获 、处于目标 、 事件冒泡

事件委托就是将目标节点的事件移到父节点来处理，由于浏览器事件冒泡的特点，当目标节点触发了该事件的时候，父节点也会触发该事件。因此，由父节点来负责监听和处理该事件。

对于动态增加或者删除且每个子节点需要相同的事件处理函数时，直接把事件添加到父结点上，减少了大量重复的事件监听，以减少浏览器资源消耗。

例子：假设有一个列表，里面每一个列表项都需要绑定相同的事件，而这个列表可能会频繁的插入和删除。使用事件委托，父节点监听事件，统一处理。

function handleClick(target) {
  // 点击列表项的处理事件
}
function delegate (e) {
  // 判断目标对象是否为列表项
  if (e.target.nodeName === 'LI') {
    handleClick(e.target);
  }
}
const parent = document.getElementById('parent');
parent.addEventListener('click', delegate);