JQ-绑定事件

其实.bind(), .live(), .delegate()都是通过.on()来实现的

stopPropagation()函数用于阻止当前事件在DOM树上冒泡。该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。

event.stopImmediatePropagation()不仅会阻止事件向祖辈元素的传播，还会阻止该元素绑定的其他(尚未执行的)事件处理函数的执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//为所有button元素绑定click事件
$(":button").click( function(event){
    alert("button-click");
    // 阻止事件冒泡到DOM树上
    event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click   
} );
// 为div元素内的所有button元素的click事件绑定处理函数
$("div").live("click", ":button", function(event){
    alert("button-click");
    event.stopPropagation();
} );
// 点击按钮，所有事件处理函数都会执行
// 因为live()函数先直接冒泡到document，然后再来触发事件，因此它无法阻止事件冒泡(执行函数时都已经冒泡完毕，当然无法阻止)
// 为div元素内的所有button元素的click事件绑定处理函数
$("div").delegate(":button", "click", function(event){
    alert("button-click");
    event.stopPropagation();
} );
// 点击按钮，会执行p-click和button-click
// 因为delegate()函数会把button元素的点击事件委托给div元素来触发，所以事件必须冒泡到div元素才能触发，它无法阻止button到div之间的事件冒泡，所以会执行p-click。

总结:如下

1、”stopPropagation()函数无法阻止live事件的冒泡。”

2、”stopPropagation()函数无法阻止该元素到”受委托”的祖辈元素之间的事件冒泡。”

1、$(“#id”).on(“click”, function(event){ event.stopPropagation(); }); 这样是可以阻止#id元素向外进行事件冒泡的。

$(“#wrapper”).on(“click”, “#id”, function(event){ event.stopPropagation(); );

但是如果on()采用的是类似上述的事件委托机制来处理，那么是无法阻止#id到外部#wrapper之间的事件冒泡的，只能阻止#wrapper到document的事件冒泡。

所以说，不管是delegate、live、还是on，只要是采用事件委托机制，那么目标元素到受委托的“祖辈”元素之间的事件冒泡，stopPropagation()是无法阻止的，这种情况是存在的哦。