1.直接给该子元素添加事件；
2.给该子元素的父元素添加事件，再在回调中判断事件点击的对象；
第一种办法是实现起来简单，可是如果子元素较多，这种做会对性能有较大的影响，而且如果是动态添加的dom元素，那么还需要在添加的时候再手动添加事件。操作过于麻烦；下面就看下在原生js中怎么实现事件委托（jq实现简单，在此不做演示）；
我们将点击事件添加到ul上，在点击li标签以及a标签，会将该事件冒泡到ul上面，从而触发ul的onmouseover事件，再在ul的事件中判断当前触发的对象是否是li标签。
好的废话不多说 我直接给出一份演示
现在我要对id为demo的节点的后代的拥有class test的节点进行监听
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo .test{
width: 10px
height: 10px
background-color: #00AEEF
margin: 5px
}
</style>
</head>
<body>
<div id="demo">
</div>
<script>
//获取所有的父节点
function getParentNode(Obj,Arr){
if(!Arr){
var Arr=[]
}
Arr.push(Obj)
if(Obj&&Obj.parentNode){
getParentNode(Obj.parentNode,Arr)
}
return Arr
}
//判断是否拥有class
function hasClass(e,v){
if(!e.getAttribute)return false
if(e.getAttribute("class")==null)return false
var allClass=e.getAttribute("class").split(" ")
if(allClass.indexOf(v)!=-1){return true}else{return false}
}
//事件委托 现在我要对id为demo的节点的后代的拥有class test的节点进行监听
//添加事件
document.getElementById("demo").addEventListener("click",function(e){
e=e||(typeof window.event=="undefined"?event:window.event)//这里对事件对象进行了一个兼容
var target=typeof e.srcElement=="undefined"? e.target: e.srcElement
var path=getParentNode(target)
for(var i=0i<path.lengthi++){
if(hasClass(path[i],"test")){
clickTest.call(path[i],e)
}
}
function clickTest(e){
console.log("你点了这个节点")
console.log(e)
console.log(this)
}
})
document.getElementById("demo").innerHTML="<div class='test'><span>"+
"asdasd</span></div>"
</script>
</body>
</html>
可以看到当我执行domObj.innerHTML=xxx时我是没有对class为test进行添加事件的 但是我点击它执行的函数就是clickTest
具体原理自己看代码吧 我就不详细说了
