事件冒泡蔚舀！
<!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;
? ? ? ? }
? ? ? ? //事件冒泡:多個(gè)元素嵌套,有層次關(guān)系,這些元素都注冊了相同的事件,如果里面的元素的事件觸發(fā)了,外面的元素的該事件自動(dòng)的觸發(fā)了.
<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;
? ? };
? ? //事件處理參數(shù)對(duì)象
? ? my$("dv3").onclick=function (e) {
console.log(this.id);
? ? ? ? //阻止事件冒泡
//e.stopPropagation();
? ? ? ? console.log(e);
? ? };
? ? //? document.body.onclick=function () {
//? ? ? console.log("哇哈哈喜之郎優(yōu)樂美");
//? };
</html>
通過本次學(xué)習(xí)主要掌握了：
事件冒泡即多個(gè)元素有層次的嵌套起來饵沧，與榮俱榮，與損俱損的鐵關(guān)系赌躺，這很單調(diào)也很乏味狼牺，只有利用阻止事件冒泡來破壞它們之間的關(guān)系，以此達(dá)到精確的事件目的礼患。
阻止事件冒泡的方法一：window.event.cancelBubble = true; --- IE特有支持(window.event==表示后邊的那個(gè)對(duì)象e)是钥，谷歌火狐不支持；
方法二：e.stopPropagation(); ---谷歌火狐支持缅叠，IE8不支持
