事件委托的封装过程

最新推荐文章于 2022-06-20 00:41:49 发布

奋斗中的切图猿

最新推荐文章于 2022-06-20 00:41:49 发布

阅读量223

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44573096/article/details/107757851

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    li{
        background-color:red;
    }
    ul div{
        width:100%;
        height:20px;
        background-color:red;
    }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li class="li1"></li>
        <li class="li1"></li>
        <li></li>
        <li class="li1"></li>
        <li class="li1"></li>
    </ul>
    <button>添加li</button>
    <script>
    var oUl=document.querySelector("ul");
    var oBtn=document.querySelector("button");
    // var aLi=document.querySelectorAll("li");//获取li元素（里面有动态创建的li元素时）,但也无法使相信创建的li背景颜色变绿。
    var aLi=oUl.getElementsByTagName("li");
    // 动态创建li元素
    oBtn.onclick=function(){
        // 动态创建li元素
        var oLi=document.createElement("li");
        // 动态创建div元素
        // var oLi=document.createElement("div");
        oUl.appendChild(oLi);
    }
    //1. 用原来的方法给li元素绑定点击事件
    // for(var i=0;i<aLi.length;i++){
    //     aLi[i].οnclick=function(){
    //         this.style.backgroundColor="green";
    //     }
    // }
    // 原来的方法（以上代码）的第一个问题：遍历出多少个，就绑定多少事件函数，浪费资源；第二个问题：新创建的元素没有事件函数。
    // 但事件委托可以解决这两个问题


    //2. 给父元素点击事件，此时点击子元素背景颜色也会变化（会冒泡到父元素）
    // oUl.οnclick=function(){
        // event.target.style.backgroundColor="green";
    // 下面的写法是可以区分动态创建什么元素，如果动态创建的是li元素，点击它时就让它的背景颜色变成绿色；如果动态创建的是其它元素（例如div），则背景颜色不变化
    //     console.log(event.target.tagName);   //是大写的LI
    //     if(event.target.tagName.toLowerCase()=="li"){
    //         event.target.style.backgroundColor="green";   //event.target是不能换成this的，如果换成了this，就指向了oUl。所以下面在封装函数的时候要注意this的指向
    //     }

            // if(event.target.className=="li1"){
            //     event.target.style.backgroundColor="green";
            // }
    // }
 



    // 3.事件委托的封装（下面是区分是tagName还是className）。
    // 这种封装只能执行一个事件函数
    // function weituo(parent,attr,fn,name){  //li .li
        // parent[attr]=function(){   //事件是一种特殊的属性
        //     if(name[0]=="."){  //判断字符串的第一位
        //         if(event.target.className==name.substring(1)){
        //             fn.call(event.target);
        //         }
        //     }else{
        //         if(event.target.tagName.toLowerCase()==name){
        //             fn.call(event.target);
        //         }
        //     }
        // }
    // weituo(oUl,"onclick",function(){
    //     alert(123);
    // },"li");


    // 4.事件委托的进一步封装，可以让所有事件函数同时执行
    function weituo(parent,attr,fn,name){
        parent.addEventListener(attr,function(){
            if(name[0]=="."){  //判断字符串的第一位
                if(event.target.className==name.substring(1)){
                    fn.call(event.target);    //加call方法，是为了让this指向目标源
                }
            }else{
                if(event.target.tagName.toLowerCase()==name){
                    fn.call(event.target);
                }
            }
        },false);
    }
    weituo(oUl,"click",function(){    //委托（delegation）
        alert(123);
    },".li1")
    weituo(oUl,"click",function(){
        this.style.backgroundColor="blue";
    },"li")
    </script>
</body>
</html>

奋斗中的切图猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件委托的封装过程

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
复制链接

扫一扫

专栏目录