事件的冒泡
- 相同事件从子元素到父亲元素一代代向上传,直到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。
- 点击浏览器空白部分时
从儿子到祖辈向外传。
阻止事件:
-
cancelBubble
(HTML DOM Event 对象属性) :如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。(这个没用不,不明白) -
stopPropagation
(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。 -
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);
}