js的事件传播

js的事件是向上传播的。

例子如下：

$("div").click(function(event) {  
    alert("div clicked");  
}); 

$("p").click(function(event) {  
    alert("p clicked");  
}); 
 

$("span").click(function(event) {  
    alert("span clicked");  
});  

若有如下HTML代码“

<div>
    <p>hello, <span>world!</span>
</div>

如果点击world，会一次弹出三个框”span clicked“，”p clicked“，”div clicked“。因为在点击span的时候，span的click事件向上传播到p的onclick函数里，然后再向上传播到div的onclick函数里。

如果点击hello，会一次弹出两个框”p clicked“，”div clicked“。因为在点击p的时候，p的click事件向上传播到div的onclick函数里。

如果点击div，就只会一次弹出一个框”div clicked“。

 

 解决事件向上传播的方法：

1、return false;

$("div").click(function(event) {  
    alert("div clicked");  
}); 
 
$("p").click(function(event) {  
    alert("div clicked");
    return false;  
}); 

$("span").click(function(event) {  
    alert("span clicked");  
    return false;  
});  

2、even.target来识别判断

$("div").click(function(event) {  
    if (event.target == this)   
        alert("div clicked");  
});  

$("span").click(function(event) { 
    if (event.target == this) 
    alert("span clicked");  
});  

$("span").click(function(event) {  
    alert("span clicked");  
});  

3、调用even.stopPropagation()方法

$("div").click(function(event) {  
    alert("div clicked");  
});  
$("span").click(function(event) {  
    alert("span clicked");  
    event.stopPropagation();  
});  

 事件向上传播的用处：

      举个例子，一个table有1000个row,每个row都要注册一个onclick函数，为每个row注册事件函数写起来容易，但由于循环多和有太多的函数需要内存管理，效率会下降。这个时候就可以写一个单一的事件函数，处理row的父元素，所有row的click event都会向上传播到这个事件函数里来接受处理。1000个事件函数需要注册和管理，现在变成一个，效率自然提升很多。