事件传播流程

Posted 2021-02-12 narkea

什么是事件？

 　　事件是文档和浏览器窗口中发生的特定的交互瞬间。 事件是javascript应用跳动的心脏，也是把所有东西黏在一起的胶水，当我们与浏览器中web页面进行某些类型的交互时，事件就发生了。

 事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键，事件还可能是web浏览器中发生的事情，比如说某个web页面加载完成，或者是用户滚动窗口或改变窗口大小。

 

什么是事件流：

   事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)。

　　 

 

什么是事件冒泡：

    　　　IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点，看一下以下示例：

 

$("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.stopPropagation()方法

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