说一下事件委托

[问答题]

说一下事件委托

拯救世界的光太郎

事件委托（又叫事件代理）

我们借助一个案例来感受一个事件代理的强大。

主要实现这样一个效果：ul 标签下有很多 li 标签，点击 li 标签，提示标签中文字的颜色

<ul id="ul">
  <li>red</li>
  <li>yellow</li>
  <li>blue</li>
  <li>green</li>
  <li>black</li>
  <li>white</li>
</ul>

常规方法：

var ul = document.getElementById('ul');
var lis = ul.getElementsByTagName('li');
for(let i in lis){
  lis[i].addEventListener('click', showColor, false);
};

function showColor(e){
  var x = e.target;
  alert("The color is " + x.innerHTML);
};

从代码中可以看出来，我们给每个 li 标签都加了功能基本相同的监听函数

事件代理：

var ul = document.getElementById('ul');
ul.addEventListener('click',showColor,false);
function showColor(e){
  var x = e.target;
  if(x.nodeName.toLowerCase() === 'li'){
    alert('The color is ' + x.innerHTML);
  }
}

将监听加在 li 的父元素 ul 标签中，在监听的回调函数中，通过 e.target 获取到真正被点击的子元素标签，然后打印这个子元素标签最中间的文本，也可以实现同样的效果。最大的优点就在于，我们只添加了一个监听，维护起来会十分的方便。并且，当我们需要通过 js 动态添加 li 时，新添加的 li 自动地地实现了上述方法。

target & currentTarget

可以看到，事件代理的核心，一个是事件交给父元素处理的思想，另一个就是对 e.target 的使用。

再说一下我对 e.target 和 e.currentTarget 的理解吧，个人感觉还是挺有用的，当时看到上面的代码时注意到的

网上有很多讲解，我也是悄悄做了做了一下总结，都来自前辈的经验：

e.target：返回真正的触发了事件的标签对象。这个会随着我们点击位置的不同，返回不同的标签对象，这个就和事件流有关
e.currentTarget：返回绑定事件的标签对象。显然这个是不会变化的，只要事件绑定好了，自然返回的就总是同一个标签

举个例子来看一下效果：

HTML标签

<div id='outer'>
  <div id='inner'></div>
</div>

JS事件：

let outer = document.getElementById('outer');
outer.addEventListener('click', function(e) {
  console.log("e.target：",e.target.id);
  console.log("e.currentTarget",e.currentTarget.id);
});

先点击outer，然后点击inner：

点击外部 div，都返回的 outer；

当我们内部 div 时，事件会经过捕获阶段，就从 outer 传递到了被点击的 inner，然后由 inner 触发对应的事件，e.target 自然就返回了 inner标签；而我们将事件绑定给了 outer，所以 e.currentTarget 返回的始终都是 outer。

编辑于 2021-10-10 16:28:21 回复(0)

矜持的微笑

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
即：
通过给父元素绑定事件来达到给子元素绑定事件的效果从而减少绑定事件的次数,节省了内层空间

好处: 1.减少DOM操作，提高性能。
2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。

缺点: 对于不冒泡的事件不支持
把所有事件都使用事件代理会造成事件的误判
层级过多在冒泡过程中可能会被某一层阻断

发表于 2022-02-07 10:17:28 回复(0)