js 原生事件委托
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 原生事件委托相关的知识，希望对你有一定的参考价值。
参考技术A 在给dom元素添加异步事件的时候，如果需要给子元素添加事件，有两种办法，1.直接给该子元素添加事件；
2.给该子元素的父元素添加事件，再在回调中判断事件点击的对象；
第一种办法是实现起来简单，可是如果子元素较多，这种做会对性能有较大的影响，而且如果是动态添加的dom元素，那么还需要在添加的时候再手动添加事件。操作过于麻烦；下面就看下在原生js中怎么实现事件委托（jq实现简单，在此不做演示）；
我们将点击事件添加到ul上，在点击li标签以及a标签，会将该事件冒泡到ul上面，从而触发ul的onmouseover事件，再在ul的事件中判断当前触发的对象是否是li标签。
原生js 事件的委托
<!DOCTYPE html>
<html>
<head>
<title>原生js事件委托</title>
<meta charset="utf-8" />
</head>
<body>
<ul>
<li>我是原来的</li>
<li>我是原来的</li>
<li>我是原来的</li>
<li>我是原来的</li>
</ul>
<button id="btn">添加一个li</button>
</body>
</html>
<script type="text/javascript">
var ul=document.getElementsByTagName(‘ul‘)[0];
var btn=document.getElementById(‘btn‘);
ul.addEventListener("click",function(e){
var evt=e||window.event;
var target=evt.target;
if(target&&target.nodeName=="LI"){
target.innerHTML="我被点击了!"
}
},0)
btn.onclick=function(){
var li=document.createElement("li");
li.innerHTML="我是新来的";
ul.insertBefore(li,ul.firstChild)
}
</script>
好处是新添加的元素也会拥有委托的方法
以上是关于js 原生事件委托的主要内容，如果未能解决你的问题，请参考以下文章