javascript 事件流和事件委托

zlevai
4,333 阅读5分钟

javascript 事件流和事件委托

javascript和HTML之间的交互是通过事件实现的。

事件就是用户或浏览器自身执行的某种动作，比如点击、加载，鼠标移入移出等等。

DOM事件流

DOM(文档对象模型)结构是一个树形结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。

事件流描述的是从页面中接收事件的顺序。

事件冒泡：IE的事件流叫 事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。自下而上。

事件捕获：是不太具体的节点先接收到事件，而最具体的节点应该最后接收到事件。自上而下。

DOM事件流：包括三个阶段：

  1. 事件捕获阶段：该阶段的主要作用是捕获截取事件

  2. 处于目标阶段：一般地，该阶段具有双重范围，即捕获阶段的结束，冒泡阶段的开始；

  3. 事件冒泡阶段：主要作用是将目标元素绑定事件执行的结果返回给浏览器，处理不同浏览器之间的差异，主要在该阶段完成

    DOM事件流
    DOM事件流

事件对象 👉 event:MDN传送门

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

var btn = document.getElementById("juejin")
btn.onclick = function(event){
  console.log(event) 
}
  • 常用属性：

  1. target 事件的目标

  2. currentTarget 绑定事件的元素，与 'this' 的指向相同

  3. stopPropagation() 取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法

  4. stopImmediatePropagation() 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）

  5. preventDefault() 取消事件的默认行为，比如点击链接跳转。如果 cancelable 是 true，则可以使用这个方法

  6. type 被触发的事件类型

  7. 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
};

事件类型

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

    • load、unload、error、select、resize、scroll

  2. 焦点事件，在页面获得或失去焦点时触发

    • blur、focusout 失去焦点
    • focus、focusin 获得焦点

  3. 鼠标事件，用户通过鼠标在页面执行操作时触发

    • click、dbclick、mousedown、mouseup

    • mouseenter、mouserleave

    • mousemove

    • mouseout、mouseover

      点击和双击事件触发的顺序如下

      • mousedown
      • mouseup
      • click
      • mousedown
      • mouseup
      • dbclick

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

    • mousewheel

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

    • textInput 当用户在可编辑区域中输入字符时，就会触发这个事件

  6. 键盘事件，当用户通过键盘在页面上执行操作时触发

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

  7. HTML5事件

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

事件委托

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

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

有什么作用？
  • 支持为同一个DOM元素注册多个同类型事件
  • 可将事件分为事件捕获和事件冒泡

用addEventListener(type,listener,useCapture)实现

  • type: 必须,String类型,事件类型
  • listener: 必须,函数体或者JS方法
  • useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段
<div id="div1"></div>

window.onload = function(){
    let div1 = document.getElementById('div1');
    div1.addEventListener('click',function(){
        console.log('打印第一次')
    })
    div1.addEventListener('click',function(){
        console.log('打印第二次')
    })
}
事件委托的优点
  1. 可以大量节省内存占用，减少事件注册
  2. 可以实现当新增子对象时无需再次对其绑定（动态绑定事件）
使用事件委托注意事项

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

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

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

👉彻底弄懂JS事件委托的概念和作用

相关文章推荐：

本文使用 👉mdnice 排版

avatar
文章
阅读
粉丝