原生js怎么注册委托事件

如题所述

好的废话不多说 我直接给出一份演示

现在我要对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=0;i<path.length;i++){
            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

具体原理自己看代码吧 我就不详细说了

温馨提示:答案为网友推荐,仅供参考
相似回答