JS实现事件委托和解决兼容性

最新推荐文章于 2021-09-06 18:51:30 发布

浅浅一笑^*^

最新推荐文章于 2021-09-06 18:51:30 发布

阅读量350

点赞数

分类专栏：事件委托 dom2级事件兼容性文章标签： dom event js window qml

本文链接：https://blog.csdn.net/weixin_46409887/article/details/105697975

版权

兼容性同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

事件委托

1 篇文章 0 订阅

订阅专栏

dom2级事件

1 篇文章 0 订阅

订阅专栏

两个案例的效果图：上和下
在这里插入图片描述
css

    <style>
        #box{
            width:300px;
            height: 300px;
            background: #FF3C3C;
        }
        li{
            color:green;
            font-size: 20px;
            font-weight: bold;
        }
        button,input{
            width: 55px;
            height: 25px;
            line-height: 25px;
            border-radius: 5px;
            border: 2px solid #000;
        }
        button{
            background: yellow;
        }
        input{
            background: lime;
        }

    </style>
</head>
<body>
<ul>
    <li id="first">001</li>
    <li id="two">002</li>
    <li id="third">003</li>
    <li id="fo">004</li>
</ul>
<div id="box">
     <button>按钮1</button>
    <input type="button" value="按钮2">
</div>

<script>
    /*e.target :(备注:某一事件执行就是某一事件e.target)
      事件属性可返回事件的目标节点（触发改事件的节点），如生成事件的元素、文档、或窗口。
    */
    /*事件委托(事件代理):
           即是把原先绑定子元素的事件（click，ablClick,keydown,...）委托给父元素，让父元素担当监听职务，
           事件代理的原理是Dom元素的事件冒泡。
    */
    /*作用:
          支持同一个DOM元素注册多个同类型的事件
          可将事件分成事件冒泡和事件捕获机制
    */
    /*优点:
          提高性能:每一个函数都会占用内存空间,只需添加一个事件处理程序代理所有事件，所占用的内存空间少
          动态监听:使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也一样具有和其他元素一样的事件
    */
    /*
      捕获：和冒泡相反 从最不具体的元素接收到最具体的元素 会从祖级层层往下找(外往里找) box box1 box2
     冒泡:一个元素接收到事件的时候会把它接收的事件传给它的父级元素 一直到window（里往外找）box2 box1 box
     事件捕获阶段查找到的目标 就是事件目标阶段。
    */
    //1.事件委托：父元素ul
     var ul=document.getElementsByTagName("ul")[0];
     ul.addEventListener("click",fn1,false);//DOM2级事件添加  单击,函数执行,冒泡;
     function fn1(e){//函数执行
         var e=e||window.event; //老式IE的兼容语句
         var tg=e.target;
        switch (tg.id) {//通过id控制
            case "first":alert("第一个li被单击了");
            break;
            case "two":alert("第二个li被单击了");
            break;
            case "third":alert("第三个li被单击了");
            break;
            case "fo":alert("第四个li被单击了");
            break;
        }
     }
   //2.事件委托:父元素box
    box.addEventListener("click",fn2,false);//DOM2级事件添加  单击,函数执行,冒泡;
     function fn2(e) {
         var e=e||window.event;//老式ie兼容语句;
         var tg=e.target;
         //通过判断标签名来进行操作
         if(tg.nodeName.toLowerCase()=="button"){//大写转小写名==标签名
            box.style.background="yellow";
         }else if(tg.nodeName.toLowerCase()=="input") {
             box.style.background="green";
         }else {
             box.style.background="red";
         }
     }

</script>