首页 > 编程语言 > 详细

JavaScript随笔——事件冒泡&事件捕获

时间:2020-08-08 17:38:49      阅读:66      评论:0      收藏:0      [点我收藏+]

什么是事件?

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

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

什么是事件流?

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


 

事件冒泡:

即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点

技术分享图片

技术分享图片 正如上面我们所说的,它会从一个最具体的的元素接收,然后逐级向上传播, p=>button=>div=>body..........事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。


 

事件捕获:

事件捕获流的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件,针对上面同样的例子,点击按钮,那么此时click事件会按照这样传播:(下面我们就借用addEventListener的第三个参数来模拟事件捕获流)

技术分享图片

 

 技术分享图片正如我们看到的,和冒泡流完全相反,从最不具体的元素接收到最具体的元素接收事件  body=>div=>button=>p


 

 

 

 

 

JavaScript随笔——事件冒泡&事件捕获

原文:https://www.cnblogs.com/oilweng555/p/13457263.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!