js 事件的冒泡和委托

简单说下事件委托与阻止冒泡

html:

1 2 3 4 5 6 7 8 9 10

< ul class = "clearfix" data-type = "cityPick" > < li class = "active_sort_opts" data-id = "0" >全部</ li > < li data-id = "88" >纽约</ li > < li data-id = "119" >洛杉矶</ li > < li data-id = "138" >拉斯维加斯</ li > < li data-id = "84" >夏威夷</ li > < li data-id = "120" >旧金山</ li > < li data-id = "105" >奥兰多</ li > < li data-id = "118" >西雅图</ li > </ ul >

js:

1 2 3 4 5 6

$( "ul[data-type='cityPick']" ).on( 'click' , function (){ alert( "父元素ul被点击" ); }); $( "ul[data-type='cityPick']" ).on( 'click' , 'li' , function (){ alert( "子元素li被点击" ); });

当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的。

解决：

1 2 3 4 5 6 7

$( "ul[data-type='cityPick']" ).on( 'click' , function (){ alert( "父元素ul被点击" ); }); $( "ul[data-type='cityPick']" ).on( 'click' , 'li' , function (e){ e.stopPropagation(); //阻止冒泡 alert( "子元素li被点击" ); });

加一句阻止冒泡即可。

delegateTarget属性用于返回负责绑定当前被调用的事件处理函数的DOM元素。

delegateTarget属性最常用于事件函数delegate()、 on()添加的委托事件中，用于返回受委托的DOM元素。

对于bind()、 live()、 click()等"非委托"事件函数而言，该属性的返回值等于currentTarget属性的值，也就是返回事件冒泡阶段中的当前DOM元素。

该属性属于jQuery的Event对象(实例)。

语法

jQuery 1.7 新增该属性。

eventObject.delegateTarget

返回值

delegateTarget属性的返回值是Element类型，返回"受委托"绑定当前事件处理函数的的DOM元素。

示例&说明

// 为id为element的元素中的所有span元素绑定click事件
$("#element").on( "click", "span", function(event){
    // event.delegateTarget 就是id为element的DOM元素
    // this 就是当前触发事件的span元素
    alert( event.delegateTarget === this); // false 
} );


// 为id为element的元素中的所有span元素绑定click事件
$("#element span").bind( "click", function(event){
    // event.delegateTarget 就是当前触发事件的span元素
    // this 就是当前触发事件的span元素
    alert( event.delegateTarget === this ); // true
} );