JavaScript中的事件处理和事件委托

翻滚的胖子
2023-06-16 15:36:23
JavaScript Java

一、事件类型

事件是与某个元素相关联的动作，如鼠标点击、键盘按下等。JavaScript中常见的事件类型包括：

1. 鼠标事件：click、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave；
2. 键盘事件：keydown、keyup、keypress；
3. 表单事件：submit、reset、focus、blur、change；
4. 窗口事件：load、unload、resize、scroll；
5. HTML5事件：contextmenu、drag、drop、online、offline、storage、websockets、history、popstate等。

二、事件传播

在HTML DOM中，事件从最具体的元素开始，逐级向上传播，直到文档的根节点。这种传播方式被称为事件冒泡。另外一种事件传播方式是事件捕获，即从根节点开始，逐级向下传播，直到最具体的元素。为了区分事件传播的方式，可以使用addEventListener()方法的第三个参数，true表示捕获阶段，false(默认值)表示冒泡阶段。

三、目标元素

在事件传播的过程中，事件会在DOM树上按照特定的顺序传播，最终到达目标元素。在事件处理函数中，可以通过event.target属性获取到目标元素。需要注意的是，event.target属性指向的是触发事件的元素，而不是绑定事件的元素。如果需要获取当前事件绑定的元素，可以使用this关键字。

四、事件委托实现

事件委托是一种常见的优化方式，可以减少事件绑定的次数，提高性能。事件委托的原理是将事件绑定到父元素上，通过事件传播机制，在父元素上捕获事件并处理。需要注意的是，事件委托只适用于那些具有共同祖先元素的多个子元素，例如ul列表中的多个li元素。下面是一个事件委托的实现示例：

var ul = document.getElementById('list');
ul.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('checked');
  }
});

在上面的代码中，通过addEventListener()方法将事件绑定到父元素ul上，当点击ul列表中的li元素时，会触发事件，通过event.target属性获取到目标元素，并进行相应的操作。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com