• 技术文章 >Web开发 >JavaScript

    js事件委托的优点

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

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

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

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

    实例

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    //原生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学习网