冒泡捕获事件
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就能直接拿来用吗,我查了一天资料也未找到相关解释,希望路过的大佬能不吝赐教,指点迷津。