0%

事件流与事件委托

事件流

当我们在一个网页中点击一个div时,我们都知道我们触发了这个div上的点击事件。但是你有没有想过,你其实不仅仅点击了这个div,你同时也点击了包裹这个div的所有元素,像是body,html乃至document,你同时触发了所有这些元素的点击事件。但是点击事件的触发是有一个先后顺序的,事件流这个概念就是用来描述从页面中接收事件的顺序的。

IE和Netscape提出的事件流是截然相反的,IE提出的事件流是 事件冒泡,而Netscape提出的事件流是 事件捕获

事件冒泡:从字面意思理解,冒泡是从下往上发生的,同样的,事件冒泡也是从下往上发生的,或者说由内向外。用上面提到的例子就是,点击div后,先触发div上的点击事件,然后先后分别触发body,html,document上的点击事件。

事件捕获:事件捕获的过程和事件冒泡恰好相反:document > html > body > div。

DOM2级事件规定事件流包括3个阶段,按照触发的先后顺序分别是:捕获阶段 > 处于目标阶段 > 冒泡阶段(见下图)。关于什么是DOM2级事件我们下面再说。

DOM事件流

规范还规定捕获阶段会在到达目标(这里的div)前结束,目标元素上的事件处理程序实际属于冒泡阶段的一部分。但是各大浏览器厂商实际上并没有听老大哥的