javascript|JS 事件的冒泡行为

大家想象一下冒泡的物理行为,就是向上浮动,js中的冒泡行为亦是如此,执行子元素的某个事件时,行为向上传递,父元素也执行相同的行为 (行为相同,执行函数可以不相同) 语法格式:
stopPropagation() 实例:

> document.getElementById("btn").addEventListener("click",showBtn); //给按钮添加点击事件 document.getElementById("div").addEventListener("click",showDiv); //给div添加点击时间 function showBtn(event) { alert("hello"); } function showDiv() { alert("word"); }

【javascript|JS 事件的冒泡行为】浏览器中将依次弹出“hello”和“word”的提示框,
> document.getElementById("btn").addEventListener("click",showBtn); //给按钮添加点击事件 document.getElementById("div").addEventListener("click",showDiv); //给div添加点击时间 function showBtn(event) { alert("hello"); event.stopPropagation(); } function showDiv() { alert("word"); }

此时加上了event.stopPropagation()方法,将不再执行父元素div的点击事件,只执行一次按钮的点击事件,即阻止了事件的冒泡行为。

    推荐阅读