捕获和冒泡事件试题

提示：一大一小俩div各自设置了mouseenter、mouseout、mouseleave、mouseover的监听事件（具体看下边）

问：将鼠标以箭头方向移动，控制台输出的是什么，如果点击了灰色div，会打印什么？

html部分：

<div id="main" style="width: 400px;height:400px;background: skyblue;margin-left: 100px;padding: 100px;box-sizing: border-box;">
	<div id="child" style="width: 200px;height:200px;background: gray;"></div>
</div>

JavaScript部分：

<script type="text/javascript">
    var n = 1;
    var btn = document.getElementById('main')
	btn.addEventListener('mouseenter', () => console.log('enter', "big", n++))
	btn.addEventListener('mouseout', () => console.log('out', "big", n++))
	btn.addEventListener('mouseleave', () => console.log('leave', "big", n++))
	btn.addEventListener('mouseover', () => console.log('over', "big", n++))
	btn.addEventListener('click', () => console.log('click', "big"))
	var ch = document.getElementById('child')
	ch.addEventListener('mouseenter', () => console.log('enter', "small", n++))
	ch.addEventListener('mouseout', () => console.log('out', "small", n++))
	ch.addEventListener('mouseleave', () => console.log('leave', "small", n++))
	ch.addEventListener('mouseover', () => console.log('over', "small", n++))
	ch.addEventListener('click', () => console.log('click', "small"))
</script>

 

答：

点击灰色div触发结果如下所示

解析：

前面几个控制台打印的不难理解，主要是第八个，也就是那个out big 8，为什么会出现这个，主要是mouseout的问题，冒泡。mouseout是只要鼠标指针离开了目标元素或者目标元素的所有子元素中的任何一个就会被触发，即使鼠标指针还在目标元素内。也就是离开子元素后，mouseout事件会冒泡到父元素上。直到取消了冒泡或者到达了最外层根元素，才会停止冒泡。

这样还不好理解的话，那就在上面的基础上再加一个不带监听事件的div，如下图所示：

将鼠标以下图的方式移动

控制台打印的是

看吧，这里打印出的 out big 6 跟上面的 out big 8是不是有什么类似的地方。
 

 

 

 

冒泡和捕获的问题，addEvenListener()第三个 参数默认为false，也就是默认为冒泡流

如何理解冒泡？

如果把上面的代码简化为这样

<big><small></small></big>

那么，在点击small的时候，冒泡流是从下到上触发，从html结构来看，也就是先触发small再到big

官方点的说法应该是，事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点，