一、三个阶段
根据事件流类型,可以把事件传播的整个过程分为3个阶段,依次为:
- 事件捕获阶段
先由文档的根节点document往事件触发对象,从外向内捕获事件对象 - 目标阶段(目标对象本身的事件程序)
到达目标事件位置,触发事件本身的程序内容; - 事件冒泡阶段1
再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。
二、事件传播过程
特点:从document对象开始,最后返回document对象结束。
本质上,事件首先向下遍历父元素,直到到达目标元素(捕获阶段)为止。
当事件到达目标时,它将在那儿触发(目标阶段)。
然后返回链上(冒泡阶段),并一路调用处理程序
三、实例
目标元素是指触发事件的确切位置。
例如,如果您单击<div>
中的<button>
,则相应的<button>
标记将成为目标。 该元素可以作为event.target
进行访问,并且在事件传播的整个阶段都不会更改。
蓝色箭头代表捕获过程,紫色箭头代表冒泡过程:
(1)所有现代浏览器都支持事件冒泡,但在具体实现中略有差别。IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)。IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。
(2)IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。
(3)、由于老版本浏览器不支持,很少有人使用事件捕获。建议使用事件冒泡。有特殊情况再使用捕获。 ↩︎
一、三个阶段
根据事件流类型,可以把事件传播的整个过程分为3个阶段,依次为:
- 事件捕获阶段
先由文档的根节点document往事件触发对象,从外向内捕获事件对象 - 目标阶段(目标对象本身的事件程序)
到达目标事件位置,触发事件本身的程序内容; - 事件冒泡阶段1
再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。
二、事件传播过程
特点:从document对象开始,最后返回document对象结束。
本质上,事件首先向下遍历父元素,直到到达目标元素(捕获阶段)为止。
当事件到达目标时,它将在那儿触发(目标阶段)。
然后返回链上(冒泡阶段),并一路调用处理程序
三、实例
目标元素是指触发事件的确切位置。
例如,如果您单击<div>
中的<button>
,则相应的<button>
标记将成为目标。 该元素可以作为event.target
进行访问,并且在事件传播的整个阶段都不会更改。
蓝色箭头代表捕获过程,紫色箭头代表冒泡过程:
(1)所有现代浏览器都支持事件冒泡,但在具体实现中略有差别。IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)。IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。
(2)IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。
(3)、由于老版本浏览器不支持,很少有人使用事件捕获。建议使用事件冒泡。有特殊情况再使用捕获。 ↩︎