javascript - 如何选择事件委托的载体

问题描述

问 题

事件委托的时候，一般都是委托给它的父元素来处理，但是如果全委托给document来处理好像也可以实现同样的功能。那么，事件委托载体的选择有没有什么遵循的原则？

解决方案

事件委托一般来说是没有什么问题的，但是这里有坑。举个例来说

<div class="container">
  <div class="line">
  </div>
</div>

$(document).on("click", ".line", () => {
    console.log("hello, click line");
})

$(".container").on("click", e => {
  console.log("hello, click container");
    e.stopPropagation();
});

这种情况下，你会发现无论如何都不会输出 hello, click line，因为事件的肥皂泡冒到 .container 那里就破了，冒不到 document。

https://jsfiddle.net/kfbpvs5a/

当然，知道这个坑之后有些问题也是可以解决的，但也会有难以解决的情况。所以一般能不用委托，就不用委托，如果需要委托，一定在最近的一层可以承载委托的父级委托。小应用为了方便，直接在 document 上委托也不是不可以，注意坑就是了。

这篇关于javascript - 如何选择事件委托的载体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！