当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JavaSript事件冒泡和事件捕获

JavaSript事件冒泡和事件捕获

2018年03月18日  | 移动技术网IT编程  | 我要评论
事件流描述的是从页面中接收事件的顺序。但当时,浏览器发展到第四代(IE4和Netscape Communicator4)时,IE和Netscape开发团队各自提出了事件流的概念,而且两个顺序流的概念差不多是相反的。如下: 1,事件冒泡:这是IE的事件流,事件冒泡是指:事件开始时,有最具体的元素接收( ...

  事件流描述的是从页面中接收事件的顺序。但当时,浏览器发展到第四代(IE4和Netscape Communicator4)时,IE和Netscape开发团队各自提出了事件流的概念,而且两个顺序流的概念差不多是相反的。如下:

  1,事件冒泡:这是IE的事件流,事件冒泡是指:事件开始时,有最具体的元素接收(最具体是指文档中嵌套里面最深的元素),然后逐级地向上传播到不具体的节点(文档)。

  2,事件捕获:这是Netscape 提出的事件流,前面说过,两个顺序几乎是相反的,所以事件捕获顺序是由最不具体的节点(文档)接收,逐级地传递到最深的元素上去。

来看一个例子:

<!DOCTYPE html>

<html>

<head> 

   <title>Event Bubbling Example</title>

</head>

<body> 

   <div id="myDiv">Click Me</div>

</body>

</html>  


如果单击了如上的<div>元素:

对于事件冒泡来说:这个click事件传播顺序为:div ----> body ----> html ----> document

 

 

 

对于事件捕获来说:这个click事件传播顺序是:document ----> html ----> body ----> div

由于老版本的浏览器不支持事件捕获,因此很少有人使用事件捕获。

建议读者放心地使用事件冒泡, 在有特殊需要时再使用事件捕获。

参考:《Javascript高级程序设计》(Nicholas C.Zakas 著,李松峰 曹力 译)

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网