关于冒泡和捕获事件执行顺序
cirzear / / 编程随笔 / 阅读量 479
近日偶尔发现一段代码,对其执行后的结果产生了一些疑惑,在查阅诸多资料后恍然大悟,特此写下,以表纪念。 如下所示

冒泡捕获事件
box1
box2
这段代码的运行后,点击box2控制台会输出如下结果: 刚开始我是不理解的,直到后来我又加了一个box3
 
box1
box2
box3
这段代码执行后,点击box3后输出的结果是 这个结果就很明显了,在查阅相关资料后,我先明确了一点: addEventListener这个监听事件, **当传参为false或者不传时,就是冒泡事件流,从内到外 **当传参为true时,监听事件会走捕获型事件流,从外到内。 这样输出就可以理解为 这个时候你会问,为什么不是先输出false,再输出true(先冒泡再捕获)而是先true后false(先捕获再冒泡)呢? 原因如下: 正如图中那样: 事件流会先执行捕获事件,等到达目标元素的父级元素时停止,这里的父级元素就是指box2,然后执行box3的事件 (“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段==>处于目标阶段==>事件冒泡阶段。首先发生的是事件捕获阶段,为截获事件提供了机会。然后是实际的目标接收事件。最后一个阶段是冒泡阶段); 这个时候你又会问:为什么box3不是先执行捕获事件,再执行冒泡事件呢? 这是因为在第二个阶段(处于目标阶段)时,执行的顺序是按照你书写的顺序执行的,为什么这么说呢,我们把box3的两个事件调换一下顺序看看 目标的事件执行顺序只和你书写的顺序有关,之后事件再从目标这里冒泡出去,所有的点就都解释通了。 但是在文章最后,我还想问一个问题,希望路过的大佬能帮忙解答一二,可能你们没注意到我的代码中,并未定义box1,box2,box3,却能在js中直接使用,而且不报错,这是为什么呢,我把id换成class就报错了,难道定义了id就能直接拿来用吗,我查了一天资料也未找到相关解释,希望路过的大佬能不吝赐教,指点迷津。
支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏
有 0 篇文章