JS点击事件，阻止事件冒泡

点击事件冒泡

例1:添加事件监听器
首先画一个div绑定点击事件来了解添加事件监听器方法

<div id="demo" style="width: 300px;height: 300px; background: black;">  demo </div>

获取这个div然后绑定两个点击事件，此时点击只会打印(222),后出现的方法覆盖了前面的

  let demo = document.querySelector('#demo')
  demo.onclick = function () {
            console.log(111)
        }
  demo.onclick = function () {
            console.log(222)
        }

当想让这两个方法都触发打印时就要用到addEventListener添加事件监听器 如下所示：

 let demo = document.querySelector('#demo')
 demo.addEventListener('click', function () {
            console.log(1)
        })
 demo.addEventListener('click', function () {
            console.log(2)
        })

例2:阻止事件冒泡
同上的div，在其中加入一个button来证实事件冒泡

 <div id="demo" style="width: 300px;height: 300px; background: black;">
    <button id="btn" style="width: 100px;height: 100px; background: red;">点击</button>
 </div>

样式图如下：

分别获取到它们，并添加点击事件，当点击button时会同时触发div的点击事件,此时出现了事件冒泡。

		let demo = document.querySelector('#demo')
        let btn = document.querySelector('#btn')
	     btn.onclick = function () {
            console.log(111)
        }
        demo.onclick = function () {
            console.log(222)
        }

通过e.stopPropagation() 来阻止事件冒泡，此时点击分别打印自身

		btn.onclick = function (e) {
            e.stopPropagation(); //阻止事件冒泡
            console.log(111)
        }
        demo.onclick = function () {
            console.log(222)
        }

鼠标事件冒泡

同样画一个div包裹一个button

 <div id="demo" style="width: 300px;height: 300px; background: black;">
    <button id="btn" style="width: 100px;height: 100px; background: red;">点击</button>
 </div>

在大div上绑定鼠标移入和移除事件

 let demo = document.querySelector('#demo')
  		demo.onmouseover = function () {
            console.log('鼠标移入');
        }
        demo.onmouseout = function () {
            console.log('鼠标移出');
        }

此时当光标从空白处移动到黑色div中打印"移入"，光标回到空白处打印"移出"，但是当光标继续移动到div内的button上时先打印了"移出"，随后打印"移入"，这时便是事件冒泡。
如图所示：

通过onmouseenter阻止事件冒泡，将onmouseover改成onmouseenter，onmouseout改成onmouseleave来实现。

  //onmouseenter阻止事件冒泡
        demo.onmouseenter = function () {
            console.log('鼠标移入');
        }
        demo.onmouseleave = function () {
            console.log('鼠标移出');
        }