js中事件2-事件冒泡及事件委托
一、事件冒泡
要了解事件冒泡,先理解下事件处理的三个周期。
DOM处理周期:三个阶段都存在
第一阶段:事件捕获;这步在后台完成,用户无法操作。例如当点击元素div时,实际上点击顺序是:document-html-body-div
第二阶段:目标触发;
第三阶段:事件冒泡;这是用户可以操作的,默认是冒泡。当触发目标后,事件的传递方式。例如当点击元素div时,实际上点击顺序是:div-body-html-document
下图是事件冒泡的示意图,还是挺形象的
事件冒泡的实例代码:
html代码:
<div id="box">
<button id="btn">按钮</button>
</div>
js代码:
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var body = document.body;
box.addEventListener('click', function(event) {
console.log('div click');
});
body.addEventListener('click', function() {
console.log('body click');
});
btn.addEventListener('click', function(event) {
//冒泡机制,点击时,依次触发btn,box,body,html,document
console.log('btn click');
//如果阻止冒泡,那么就不会触发box,body,html,document
// event.stopPropagation();
});
阻止事件冒泡方法:
DOM : event.stopPropagation()
ie : event.cancelBubble=true;
二、事件委托
事件委托:将事件处理函数通过冒泡托管给父级元素
应用场景 — 为未来元素(脚本动态创建的元素)绑定事件
1. 当点击btn按钮时,会输出 '点击了’
html代码:
<div id="box">
<button id="btn">按钮</button>
</div>
js代码:
window.onload = function() {
var box = document.getElementById('box');
var btn = document.getElementById('btn');
box.addEventListener('click', function(e) {
//相当于其中e,也可以写成ev,event var e=event? event||window.event;
var e = e || event;
/*此时e是 MouseEvent事件,
type:click;
target: button#btn (target指的是click的元素节点button,此元素有id,nodeName,nodeValue,)
*/
console.log(e);
//false。 此时this指的是box元素,而e.target指的是被点击的button元素
console.log(this === e.target);
//阻止事件继续向box以上层次冒泡,这样body,html,document就不会接收到click事件了
e.stopPropagation();
//当点击btn时,事件传递到了box,触发了box的click事件-'点击了'
console.log('点击了');
});
}
2. 给未来元素添加事件
html代码:
<div id="box">
<button>按钮</button><br />
<div id="hao">nihao</div> --> //点击div 元素时,此时event事件target就是div#hao
</div>
js代码:
var box = document.getElementById('box');
box.addEventListener('click', function(e) {
var e = e || event;
// console.log(e);
e.stopPropagation();
if (e.target.nodeName == "BUTTON") { //当点击的元素nodeName为BUTTON时
//给未来元素(脚本动态创建的元素)绑定事件
var button = document.createElement('button'); //创建button元素
button.innerHTML = 'new button';
box.appendChild(button); //追加子节点button
});
3. 给子元素添加不同的处理函数
html代码:
<div id="box">
<button id="btn1">第1个按钮</button>
<button id="btn2">第2个按钮</button>
<button id="btn3">第3个按钮</button>
<button id="btn4">第4个按钮</button>
<button id="btn5">第5个按钮</button>
</div>
js代码:
var box = document.getElementById('box');
box.addEventListener('click', function(e) {
var e = e || event;
e.stopPropagation(); //阻止事件冒泡
switch (e.target.id) { //判断被点击的元素id
case 'btn1': //不同的id有不同的处理函数
console.log(11111);
break;
case 'btn2':
console.log(222222);
break;
case 'btn3':
console.log(33333333333);
break;
case 'btn4':
console.log(44444444444);
break;
case 'btn5':
console.log(5555555555);
break;
}
});