4.事件冒泡及事件阻止

事件的冒泡

• 相同事件从子元素到父亲元素一代代向上传，直到document。

html

 <div class="out" id="out">
   	<div class="in1" id="in1">我是第一个</div>
    <div class="in2" id="in2">第二个是我</div>
 </div>

css

 .out {
   width: 200px;
    height: 200px;
    background-color: pink;
}

.out .in1 {
    width: 100px;
    background-color: yellow;
}

.out .in2 {
    width: 100px;
    background-color: greenyellow;
    margin-top: 20px;
}

JavaScript

window.onload = function (ev) {
var out = document.getElementById("out");
 var in1 = document.getElementById("in1");
 var in2 = document.getElementById("in2");

 in1.onclick = function (ev1) {            
     console.log(this.innerHTML);
 }
 in2.onclick = function (ev1) {            
     console.log(this.innerHTML);
 }
 out.onclick = function (ev1) {            
     console.log(this.innerHTML);
 }
 document.onclick = function (ev1) {            
     console.log("最外层 document");
 }
}

结果

• 点击我是第一个时：
  
  先是黄色框，然后是粉色，最后是document。

---

• 点击粉红色框框时
  
  显示粉色框，然后是document。

---

• 点击浏览器空白部分时
  

从儿子到祖辈向外传。

阻止事件：

1. cancelBubble（HTML DOM Event 对象属性） ：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。（这个没用不，不明白）

2. stopPropagation（HTML DOM Event 对象方法）：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

3. preventDefault（HTML DOM Event 对象方法）通知浏览器不要执行与事件关联的默认动作。(调用：e.preventDefault();)

如果阻止这样的事件冒泡，使用 e.stopPropagation(). (谷歌浏览器)
添加return false，不能接阻止事件的传递 ：

JavaScript

 window.onload = function (ev) {
 var out = document.getElementById("out");
 var in1 = document.getElementById("in1");
 var in2 = document.getElementById("in2");

 in1.onclick = function (ev1) {            
     console.log(this.innerHTML);            
     ev1.stopPropagation();
 }
 in2.onclick = function (ev1) {            
     console.log(this.innerHTML);
     return false;				//测试return false 
 }
 out.onclick = function (ev1) {            
     console.log(this.innerHTML);
     ev1.stopPropagation();
 }
 document.onclick = function (ev1) {            
     console.log("最外层 document");
 }
}

点击结果:

点击我是第一个时（黄色框框）

事件被阻止了。

---

点击我是第二个（绿色框框）

该标签未设置阻止事件（添加了return false语句，没有效果），但父亲组件设置了阻止事件，所以传递到父亲就停止了

---

点击粉色大框框

事件被阻止了。

---

点击浏览器空白处

---

事件的委托

通过父亲元素绑定事件，再运用事件冒泡，来找到目标元素

优点：不需要绑定多个事件，减少代码量，同时不需要重复绑定事件

html

 <button id="add">添加一个链接</button>
 <ul id="box">
   	<li>灰原</li>
    <li><a href="#" class="link">第一个链接</a></li>
    <li><a href="#" class="link">第二个链接</a></li>
    <li><a href="#" class="link">第三个链接</a></li>
 </ul>

JavaScript

var box = document.getElementById("box");
var add = document.getElementById("add");

 add.onclick = function (ev1) {
     var li = document.createElement("li");
     li.innerHTML = "\<a href=#>新添加的链接</a>";
     box.appendChild(li);
 }

 box.onclick = function (event) {
     event = event || window.event;
     event.preventDefault();
     console.log(event.target.innerHTML);
 }

结果