js的事件传播过程

1.事件传播的三个过程，事件捕获阶段、处于目标阶段、事件冒泡阶段。
2.事件捕获由远及近逐渐靠近事件目标，事件冒泡由事件目标逐渐向上冒泡
3.在捕捉阶段，事件从document对象沿着文档树向下传播给目标节点。如果目标的任何一个祖先注册了捕捉事件句柄，那么在事件传播的过程中，就会运行这些句柄
4.发生在目标节点自身，这与0级事件模型提供的事件处理方法类似。
就是传说中的气泡阶段，在这个阶段，事件将从目标元素向上传播回(像冒泡)Document对象的文档层次。例外：元素的提交事件不起泡(当然也没什么用)。一般来说，原始事件起泡，而高级语义事件不气泡
　　任何事件句柄都可以调用表示那个事件的Event对象的stopPropagation()方法，停止事件传播。
说到这里不得不提一下事件冒泡
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();  
});

以上就是js事件传播的过程以及过程中产生的事件冒泡的处理方法
以上为本人理解，如有不足，欢迎补充。