【修真院web小课堂】 IE事件流和W3C事件流有什么区别, 参数分别是什么, 以及如何阻止事件冒泡?

大家好,我是IT修真院西安分院第1期的学员,一枚正直纯洁善良的WEB程序员


1.知识剖析

什么是事件?什么是事件流?

HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。而事件流(又叫事件传播)描述的是从页面中接收事件的顺序。

浏览器的事件历史

当浏览器发展到第四代时(IE4及Netscape4),浏览器开发团队遇到了一个很有意思的问题:页面的哪一部分会拥有某个特定的事件?想象画在一张纸上的一组同心圆。如果把手指放在圆心上,那么手指指向的不是一个圆,而是纸上的所有圆。

两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮,他们都认为单击事件不仅仅发生在按钮上,甚至也单击了整个页面。但有意思的是,IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流

2.知识剖析

事件冒泡流

IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。以下面的HTML页面为例。也就是说,click事件首先在div

元素上发生,而这个元素就是我们单击的元素,然后click事件沿着dom树向上传播,在每一级节点都或发生,直至传播到document对象

事件捕获流。

事件捕获的概念,与事件冒泡正好相反。它认为当某个事件发生时,父元素应该更早接收到事件,具体元素则最后接收到事件。比如说刚才的demo,如果是事件捕获的话,事件发生顺序会是刚好与上面相反的。即window,document,document.body,button。虽然事件捕获是Netscape唯一支持的事件流模型,但IE9、Safari、Chrome、Opera和Firefox目前也都支持这种事件流模型。但由于老版本的浏览器不支持,因此很少有人使用事件捕获。所以放心的使用事件冒泡,有特殊需要再使用事件捕获即可。

dom事件流

DOM事件流可以分为下面3个阶段:

1. 事件捕获阶段

2. 处于目标阶段

3. 事件冒泡阶段

3.常见问题

如何阻止事件冒泡?

阻止冒泡事件: 
(1)W3C调用e.stopPropagation();或者 return false; 
(2)IE通过设置window.event.cancleBubble=true;


4.解决方案

根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函数,就会触发执行这些函数。

使用stopPropagation()函数可以阻止当前事件向祖辈元素的冒泡传递,也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

该函数只阻止事件向祖辈元素的传播,不会阻止该元素自身绑定的其他事件处理函数的函数。event.stopImmediatePropagation()不仅会阻止事件向祖辈元素的传播,还会阻止该元素绑定的其他(尚未执行的)事件处理函数的执行。


6.扩展思考

事件处理程序类别有哪些?

html事件处理程序:

某个元素支持的某个事件可以用与事件处理程序同名的html特性来指定,该特性的值是能够执行的JavaScript代码,这也是我们最初学js,最开始的方法。

优点:简单明了,省去获取元素等一系列前提操作

缺点:html代码与js代码高度耦合,不符合分离原则

DOM0级别事件处理函数

使用 element.on[eventname]=fn的方式给元素添加事件

手写事件模型及事件代理、委托 
1、事件代理/委托的优缺点,是靠冒泡机制来实现的: 
优点:  
(1)可以减少大量内存占用,减少事件注册; 
(2)可以实现当新增子对象时,无需再对其绑定事件,对于动态内容部分更合适; 
缺点: 如果所有事件都用事件代理,则可能会出现事件误判,即本不应该触发的对象绑上了事件。


提问人:  汤镇铭  问题:浏览器的重绘和回流是啥?
答:重绘:对元素的背景颜色,字体样式样式进行设置,如:font-weightcolorbackground-color.回流一定是重绘,重绘不一定是回流
回流:因为元素的尺寸,布局,隐藏等改变而需要重新对其进行构建的操作(重构页面)。包括:1、对font-size,margin,padding 等可以改变宽高和布局的style属性(尺寸、内容、距离)的改变。2、添加、删除(可见元素)的dom操作。3、用户操作 改变浏览器窗口大小或是字体等4、对offset**** 、scroll***、client***、width/height的改变(***=Top/Left/Width/Height)
提问人:  汤镇铭  问题:捕获的应用场景是啥?
答:可以理解为事件委托。
提问人:  汤镇铭  问题:事件委托?
答:事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件




猜你喜欢

转载自blog.csdn.net/fgwas100/article/details/80052046
今日推荐