简述事件委托

90 阅读2分钟

事件委托,通俗说就是把一个元素响应事件(click,keydown...)的函数委托到另一个元素;

就拿点击事件来说吧,一般要给一个元素添加点击事件,都是直接给那个元素添加,但是,假设你要点击一个现在还不存在的元素,怎么办!

分析:因为我们还不知道要监听事件的元素是什么,但是我们知道它的父元素,我们可以先监听它的父元素,等触发事件的时候,再看看是不是我们想要监听的元素。这样就完成对不存在的元素进行监听。这就实现了动态绑定事件。

在很多时候,我们需要通过AJAX或者用户操作动态的增加或删除列表项元素,那么每一次改变元素都要重新给新元素绑定事件,给删除的元素解绑事件;

这时候,事件委托无疑于就是很好的办法,因为事件绑定在父元素的,和目标元素的增减是没有关系的,执行到目标元素是在响应执行事件函数的过程匹配的,所以事件委托在这种情况下可以减少重复工作。

再来说一种情况吧,如果我们有一个列表,里面有大量列表项,需要给每个列表项都绑定一个点击事件。

<ul>
  <li>点击1</li>
  <li>点击2</li>
  <li>点击3</li>
  <li>点击4</li>
  <li>点击5</li>
  ...
</ul>

分析:因为这里要给每一个li元素绑定点击事件,所以可以用到循环,逐个点击,虽然也可以实现,但是对于内存消耗太大,在效率上需要消耗很多性能,所以,比较好的方法就是把点击事件绑定到它的父元素上,然后执行事件的时候匹配判断目标元素,所以事件委托,可以减少内存,节约效率。

总结

委托优点:
1.动态绑定事件
2.减少内存消耗