• 技术文章 >Web开发 >JavaScript

    js事件委托的优点

    小妮浅浅小妮浅浅2021-10-20 14:43:37原创4602

    1、绑定在父元素上只需要绑定一次,节省性能。

    2、子元素不需要每个人都绑定同一个事件。

    3、如果后续添加新的子元素,由于事件委托,会自动接收父元素的事件监控。

    实例

    //原生js事件委托的例子,css部分可以忽略
    <!doctype html>
    <html>
    <head>
    <style>
    ul{
    list-style: none;
    display: flex;
    }
    ul li{
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: pink;
    font-weight: bold;
    border: 1px solid #eee;
    }
    ul li:hover{
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <div>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    </div>
    </body>
    <script>
    var ul = document.querySelector("ul");
    var li = document.querySelectorAll("li");
    ul.onclick = function(e){//e指event,事件对象
    var target = e.target || e.srcElement; //target获取触发事件的目标(li)
    if(target.nodeName.toLowerCase() == 'li'){//目标(li)节点名转小写字母,不转的话是大写字母
    alert(target.innerHTML)
    }
    }
    </script>
    </body>
    </html>

    以上就是js事件委托的优点,希望对大家有所帮助。更多Javascript学习指路:Javascript

    专题推荐:js 事件委托
    上一篇:js如何合并两个有序数组 下一篇:js原型链继承的优点

    相关文章推荐

    • js中ES Module和CommonJs的区别• js作用域链是什么• js声明变量的提升• js中pop和push的比较• js中shift和unshift的对比• js如何检查是否满足条件• js数组归并的方法• js函数中arguments属性是什么• js函数中this如何使用• js中eval方法是什么• js深度优先遍历的介绍• js广度优先遍历如何实现• js中快速排序如何实现• js中二分搜索的使用

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网