事件冒泡！
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>title
#dv1{
width:300px;
height:200px;
background-color: red;
}
#dv2{
width:250px;
height:150px;
background-color: green;
}
#dv3{
width:200px;
height:100px;
background-color: blue;
}
//事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
<div id="dv1">
<div id="dv2">
<div id="dv3">
<script src="common.js">
//事件冒泡,阻止事件冒泡,
//如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
// e.stopPropagation(); 谷歌和火狐支持,
my$("dv1").onclick=function () {
console.log(this.id);
};
my$("dv2").onclick=function () {
console.log(this.id);
//window.event.cancelBubble=true;
};
//事件处理参数对象
my$("dv3").onclick=function (e) {
console.log(this.id);
//阻止事件冒泡
//e.stopPropagation();
console.log(e);
};
// document.body.onclick=function () {
// console.log("哇哈哈喜之郎优乐美");
// };
</html>
通过本次学习主要掌握了：
事件冒泡即多个元素有层次的嵌套起来，与荣俱荣，与损俱损的铁关系，这很单调也很乏味，只有利用阻止事件冒泡来破坏它们之间的关系，以此达到精确的事件目的。
阻止事件冒泡的方法一：window.event.cancelBubble = true; --- IE特有支持(window.event==表示后边的那个对象e)，谷歌火狐不支持；
方法二：e.stopPropagation(); ---谷歌火狐支持，IE8不支持
网友评论