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体的最后面，*/