js事件委托

什么叫事件委托?有点类似于异常处理,

就比如,一个很不合理,只为讲清楚原理的例子,假如我们的js代码是这样,

<script>
$("body").click(function(){

alert('hhh');
}
)
</script>

以上是给body标签绑定click事件,那么回出现什么现象呢?现象是,无论body体内部怎么写,无论是我们定义多少个标签,子标签,子子标签,等等,点击任何一个标签,都会触发这个function。这就是事件委托。就是说假如一个标签有事件,那么他就会从自身开始,层层向上传递这个事件,直到有个上级标签能处理了这个事件。因为body标签是我们能看到的页面的所有标签的最终上级标签,所以,这个不恰当的例子,就会有前面描述的现象

 <p>p1</p>

<p>p1</p>
<script>

$("p").click(function(){
alert('hhh');

}
)
</script>
<p>p2</p>

/*以上html页面只写了一部分,剩下的可以自己补齐。
如果补齐后放在浏览器里打开,那么,点击p1会弹窗,点击p2不会弹窗,这说明了,浏览器执行到js代码后,只执行一次,在本例中就是给上面的所有的p标签绑定事件。而p2是在这个js代码后的,浏览器还没有运行到那里,所以他没有被绑定点击事件。

同时,明白了上面这个就应该能理解,假如这段代码,我们后面又添加一段js代码,这段js代码的作用生成了一个p标签,并把他插入到最上面,那么,点击这个p标签,他依然不会弹窗。这就说明了,我们这个点击事件触发弹窗的js代码,只运行一次,
他的作用就是给已经渲染过的所有p标签了绑定点击事件,但他运行完了就不会再运行第二次,
所以,js代码通常写在body体的最后面,*/
原文地址:https://www.cnblogs.com/saolv/p/10193622.html