js事件委托

Posted 2021-01-30 扫驴

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

 

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

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

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

 

 

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

 

 

<p>p1</p>

<script>

＄("p").click(function(){
alert(‘hhh‘);

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

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



所以，js代码通常写在body体的最后面