Js事件处理之“事件传播三个阶段”

一、三个阶段

根据事件流类型,可以把事件传播的整个过程分为3个阶段,依次为:

  1. 事件捕获阶段
    先由文档的根节点document往事件触发对象,从外向内捕获事件对象
  2. 目标阶段(目标对象本身的事件程序)
    到达目标事件位置,触发事件本身的程序内容;
  3. 事件冒泡阶段1
    再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。

二、事件传播过程

特点:从document对象开始,最后返回document对象结束。

本质上,事件首先向下遍历父元素,直到到达目标元素(捕获阶段)为止。
当事件到达目标时,它将在那儿触发
(目标阶段)
然后返回链上
(冒泡阶段),并一路调用处理程序

三、实例

目标元素是指触发事件的确切位置。

例如,如果您单击<div>中的<button> ,则相应的<button>标记将成为目标。 该元素可以作为event.target进行访问,并且在事件传播的整个阶段都不会更改。

蓝色箭头代表捕获过程,紫色箭头代表冒泡过程:
在这里插入图片描述

四、实例

在这里插入图片描述
示例: 点内层元素,也触发父元素上的事件处理函数:

<style type="text/css">
	div {/* 定义div元素样式 */
	    margin: 20px;			/* 边界距离 */
	    border: solid 1px blue; 	/* 蓝色边框线 */
	    font-size: 18px; 		/* 字体大小 */
	}
</style> 

<div class="div-1">div-1
    <div class="div-2">div-2
        <div class="div-3">div-3
            <div class="div-4">div-4
                <div class="div-5">div-5</div>
            </div>
        </div>
    </div>
</div>
<p id="show"></p>


<script>
    function bubble() {
        var div = document.getElementsByTagName('div');
        var show = document.getElementById("show");
        for (var i = 0; i < div.length; ++i) { 		//遍历div元素
            div[i].onclick = (function(i) { 		//为每个div元素注册鼠标单击事件处理函数
                return function() {			//返回闭包函数
                    div[i].style.border = '1px dashed red'; //定义当前元素的边框线为红色虚线
                    show.innerHTML += div[i].className + " > "; //标识每个div元素的响应顺序:div5>div4>div3>div2>div1
                }
            })(i);
        }
    }
    window.onload = bubble;
</script>

  1. (1)所有现代浏览器都支持事件冒泡,但在具体实现中略有差别。IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)。IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。
    (2)IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。
    (3)、由于老版本浏览器不支持,很少有人使用事件捕获。建议使用事件冒泡。有特殊情况再使用捕获。 ↩︎

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你脸上有BUG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值