事件冒泡与on的用法

标签：

<div class="mainbody"> 

<div class="box">

    <div class="items">

<div class="item">1</div>

<div class="item5 " id="item5">13</div>

    </div>

</div>

</div>

<script>

$(".item").click(function(){alert(11111);return false;});

$(".items").click(function(){alert("items---items");});

$(".box").click(function(){alert("box---box");});

                $("body").click(function(){alert("body---body");});

$(".mainbody").on("click","#item5",function(){

alert(5555);

return false;

});//弹出 items  box 5555,click事件是绑定到了mainbody上，当点击item5的时候事件向上冒泡，先触发父级的click事件，继续冒泡，触发box的click事件，最后触发mainbody自己的click事件，然后阻止冒泡不再向上触发事件

</script>

事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果。

好处：1.提高性能。假如有5000个li要加click事件，只需在其父级上加一个便可2.新添加的元素还会有之前的事件。

坏处：这样一层层冒泡上来查找与选择器匹配的元素，又影响到性能了，所以dom树不要太深

重要说明：

on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件，而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制，当后代元素selector触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器selector，jQuery就会捕获该事件，从而执行绑定的事件处理函数。

事件冒泡与on的用法

标签：

原文地址：http://www.cnblogs.com/47-mj/p/4813643.html