事件委托

事件委托是为了解决事件处理程序过多造成的内存和性能问题。

事件委托就是利用事件冒泡,只指定一个事件处理程序，就可以管理某一类型的所有事件。

事件委托的作用

支持为同一个DOM元素注册多个同类型事件

可将事件分为事件捕获和事件冒泡

用addEventListener(type,listener,useCapture)实现

type: 必须,String类型,事件类型

listener: 必须,函数体或者JS方法

useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段

事件委托的优点：

可以大量节省内存占用，减少事件注册
可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

使用事件委托需要注意事项

使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。

事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。

如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。

js事件流规定事件流主要分为三个阶段：

事件捕获阶段：主要作用是捕获截取时间
处于目标阶段：一般此阶段有双重范围，捕获阶段的结束和冒泡阶段的开始
事件冒泡阶段：主要作用是讲目标元素绑定事件执行的结果返回给浏览器，处理不同浏览器之间的差异主要在此阶段完成

在触发DOM上的某个事件时，会产生一个事件对象event，该对象包含所有与事件有关的信息。

var btn = document.getElementById("juejin")
btn.onclick = function(event){
  console.log(event) 
}

常用属性：

target 事件的目标
currentTarget 绑定事件的元素，与 'this' 的指向相同
stopPropagation() 取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法
stopImmediatePropagation() 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）
preventDefault() 取消事件的默认行为，比如点击链接跳转。如果 cancelable 是 true，则可以使用这个方法
type 被触发的事件类型
eventPhase 调用事件处理程序的阶段：0表示这个时间没有事件正在被处理，1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段

document.body.onclick = function(event){
    alert(event.currentTarget === document.body); //true
    alert(this === document.body); //true
    alert(event.target === document.getElementById("myBtn")); //true
};

常见的事件类型：

UI (User Interface) 事件，当用户与页面上的元素交互时触发

load、unload、error、select、resize、scroll 焦点事件，在页面获得或失去焦点时触发

blur、focusout 失去焦点focus、focusin 获得焦点鼠标事件，用户通过鼠标在页面执行操作时触发

click、dbclick、mousedown、mouseup mouseenter、mouserleave mousemove mouseout、mouseover 点击和双击事件触发的顺序如下

mousedownmouseupclickmousedownmouseupdbclick

滚轮事件，当使用鼠标滚轮操作时触发

mousewheel 文本事件，在文档中输入文本时触发

textInput 当用户在可编辑区域中输入字符时，就会触发这个事件键盘事件，当用户通过键盘在页面上执行操作时触发

keydown 按下键盘任意键时触发，不松开，则一直触发keypress 按下键盘上的字符键时触发，不松开，则一直触发Keyup 用户释放键盘上的建时触发 HTML5事件

contextmenu 事件：单价鼠标右键可以调出上下文菜单beforeunload 事件：在浏览器卸载页面之前触发DOMContentLoad 事件：在形成完整的DOM树之后就会触发。readystatechange 事件：提供与文档加载状态有关的信息pageshow和pagehide 事件：页面显示和隐藏时触发 hashchange 事件 : hash改变时触发

参考

juejin.cn/post/684490…

js事件流和委托事件