事件冒泡详解及阻止事件冒泡

什么是事件冒泡？

事件冒泡：从子元素向父元素触发 —>当某个事件触发时，同样的事件会向父元素触发。
但并不是所有事件都会产生冒泡问题 onfocus、 onblur 、onload不会产生冒泡问题
以上文字看起来太官方，不容易理解，下面给大家来点通俗易懂的
举例来说明：
例如：
现在窗口上有一个按钮，给按钮绑定一个点击事件，点击安钮让其显示一个提示框。
给界面也绑定一个点击事件，点击其按钮外的任何位置让其提示框消失。
那么问题来了，按钮也属于界面里，点击安钮的话岂不是就冲突了。那么怎么来解决这个问题呢？

这类情况就被称为事件冒泡！

阻止事件冒泡

阻止事件冒泡要在哪阻止呢？
阻止事件冒泡就好比，一个人身体上的某一部位发生病变且有可能会蔓延到其他部位，我们就要在这个部位进行手术来阻止它的蔓延。

html代码：

 <input type="button" value="按钮" id="obut" onclick="but()">
 <div id="div1" style="display: none;width: 300px; height: 100px; border: 1px solid black;">提示框</div>

javascript代码：

 let obut = document.getElementById("obut");
 let div1 = document.getElementById("div1");
   function but(evt){
        let e = evt || event; //为了兼容大多数浏览器 这里采用事件的兼容写法
        div1.style.display = "block"; //点击安钮让其提示框显示
        e.stopPropagation?e.stopPropagation():e.cancelBubble=true;//阻止事件冒泡
    }
    document.onclick = function(){//给document绑定点击事假
        div1.style.display = "none";//点击界面的任何一个位置让提示框隐藏
    }