简单说说事件冒泡的小demo-2

• 1.事件冒泡
• • 代码
  • 效果
• 2.阻止事件冒泡：
• • 代码
  • 效果
• 3.e.stopPropagation()

1.事件冒泡

代码

<div id="demo" style="width: 300px;height: 300px; background-color: red;">
        <div id="btn" style="width: 200px;height: 200px;background-color: skyblue;">
            <div id="cc" style="width: 100px;height: 100px;background-color: yellow;">小</div>
            中
        </div>
        大
    </div>
           

let demo = document.querySelector('#demo')
	let btn = document.querySelector('#btn')
	let cc = document.querySelector('#cc')
           

demo.addEventListener('click', function () {
		console.log(1111);
	})
	
	btn.addEventListener('click', function () {
		console.log(2222);
	})
	
	cc.addEventListener('click', function () {
		console.log(3333)
	})
           

效果

我们依次从小到大点击方块，可以发现点击上层方块的会一同触发下层方块的事件，这是受到事件冒泡的影响，这在很多时候，这并不方便，所以我们要阻止事件冒泡。

2.阻止事件冒泡：

代码

demo.addEventListener('click', function (e) {
		console.log(1111);
	})
	btn.addEventListener('click', function (e) {
		console.log(2222);
		e.stopPropagation()//不派发事件，只执行该节点上的事件，不派发至其父节点
	})
	cc.addEventListener('click', function (e) {
		console.log(3333)
		e.stopPropagation()//如上
	})
           

效果

我们可以使用**e.stopPropagation()**来进行阻止。

3.e.stopPropagation()

定义：不再派发事件，终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

语法

event.stopPropagation()

说明：该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。