js 原生事件委托
2018-01-23 本文已影响18人
流动码文
在给dom元素添加异步事件的时候，如果需要给子元素添加事件，有两种办法，
1.直接给该子元素添加事件；
2.给该子元素的父元素添加事件，再在回调中判断事件点击的对象；
第一种办法是实现起来简单，可是如果子元素较多，这种做会对性能有较大的影响，而且如果是动态添加的dom元素，那么还需要在添加的时候再手动添加事件。操作过于麻烦；下面就看下在原生js中怎么实现事件委托（jq实现简单，在此不做演示）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" id="btn" />
<ul id="ul">
<div>
<li>
aaaaaaaa
<a href="#">111111</a>
</li>
<li>
bbbbbbbb
<a href="#">222222</a>
</li>
<li>
cccccccc
<a href="#">333333</a>
</li>
</div>
</ul>
</body>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('div');
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
div.onmouseover = function(ev) {
var ev = ev || window.event;
var target = ev.target;
console.log('div', target)
}
oUl.onmouseover = function(ev){
var ev = ev || window.event;
ev.stopPropagation();
var target = ev.target || ev.srcElement;
// alert(target.innerHTML);
console.log('ul', target);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}
</script>
</html>
我们将点击事件添加到ul上，在点击li标签以及a标签，会将该事件冒泡到ul上面，从而触发ul的onmouseover事件，再在ul的事件中判断当前触发的对象是否是li标签。
