JavaScript 事件委托

事件委托

事件流

事件触发
- 用户操作，触发事件。
事件捕获
- 事件触发之后，浏览器会从window对象开始一层层向下捕获事件事件触发对象。
事件处理阶段
- 当事件捕获到事件触发对象时，事件捕获结束，开始事件处理。
事件冒泡
- 当事件处理完成后，进入事件冒泡阶段，浏览器从事件触发对象开始一层层向上冒泡（触发事件），直到window对象结束。

事件委托

概念
- 事件委托，也叫事件代理，是JavaScript中绑定事件的一种常用技巧。就是将原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

问题场景

有一个ul，里面有10个 li，我要点击 li 时，把我点击的这个li 的文字颜色变成红色。

解决方案

方案一

给10个li 全部绑定点击事件，当li 被点击时，改变被点击的li 的文字颜色。

代码

  <ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li><li>我是第6个li</li><li>我是第7个li</li><li>我是第8个li</li><li>我是第9个li</li><li>我是第10个li</li></ul><script>const lis = document.querySelectorAll('li')// 方案一 全部添加 点击事件lis.forEach((item, index) => {item.addEventListener('click', function (e) {e.target.style.color = 'red';})})</script>

效果

方案二

利用事件委托，在 ul 上监听点击事件

代码

    // 方案二 给 ul 添加点击事件const ul = document.querySelector('ul')ul.addEventListener('click', function(e) {e.target.style.color = 'red';})

效果

总结：

事件委托就是将子元素的事件监听放到父元素上，通过事件冒泡来监听所有子元素的同类事件，通过e.target 来获取事件触发对象。
绑定事件的addEventListener 的参数
- 事件类型 不要加 on
- 事件处理函数
- 布尔值/对象
  - 布尔值 该事件是否采用捕获（不捕获就冒泡）
  - 对象
    - once：只执行一次。
    - passive：承诺此事件监听不会调用preventDefault，这有助于性能。
    - useCapture：是否捕获（否则冒泡）。

JavaScript 事件委托相关推荐

Javascript事件委托
概念: 事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件冒泡:就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul ...
JavaScript事件委托（事件代理）
将事件处理加载到父级元素上,可避免将事件处理加载到多个子集元素上. 原理:利用的就是事件冒泡和目标元素不去监听所有的子元素事件,只监听他们的父级元素,当某个子元素被触发时,事件会向上冒泡的父级元素.在 ...
JavaScript事件委托之鼠标移入移出事件
鼠标移入移出事件 <div class="parent">父元素<div class="child">子元素</div>&l ...
手撕前端面试题（Javascript~事件委托、数组去重、合法的URL、快速排序、js中哪些操作会造成内存泄漏......
前端的那些基本标签
JavaScript：事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...
javascript和jq的事件委托
2019独角兽企业重金招聘Python工程师标准>>> 今天在公司,有个需求是,通过ajax动态查询数据,回来,再添加到一个ul的li元素中,例如(点击生成 li 模拟,加载数据生成 ...
Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
javascript事件监听与事件委托
事件监听与事件委托在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托 ...
javascript的事件冒泡,阻止事件冒泡和事件委托，事件委托是事件冒泡的一个应用。...
2018年12月13日更新 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...

JavaScript 事件委托

事件委托

事件流

事件委托

问题场景

解决方案

总结：

JavaScript 事件委托相关推荐

最新文章

热门文章