原理:事件委托,从名字上就能理解,就是自己的事情交给别人去做(将事件委托给别人)
实现方法:onclick,onmouseover,onmouseout等就是事件。委托,就是让别人来做。利用冒泡的原理,把事件加到父级上,触发执行效果。
假设我们有一个父元素div,里面有很多子元素,但我们关心的是里面的一个带有”classA” CSS类的A标记:
// 获得父元素DIV, 添加监听器...
document.getElementById("myDiv").addEventListener("click",function(e) {
e=window.event?window.event:e;
// e.target是被点击的元素
if(e.target && e.target.nodeName == "A") {
// 获得CSS类名
var classes = e.target.className.split(" ");
// 搜索匹配!
if(classes) {
// For every CSS class the element has...
for(var x = 0; x < classes.length; x++) {
// If it has the CSS class we want...
if(classes[x] == "classA") {
// Bingo!
console.log("Anchor element clicked!");
// Now do something here....
}
}
}
}
});
事件委托的优点:假设有很多li元素(10000个),我们想为每一个li元素注册一个单击事件,当然你可以选择为每一个元素注册一个单击事件,可以利用循环遍历每一 个元素,这种想法最直接,最直观存在一个问题,这样的遍历操作势必会占用大量的资源。但是,如果我们利用冒泡原理,将事件委托给li元素的父级处理,这样不管多少个都能轻松搞定。