js事件委托--面试考点

最新推荐文章于 2024-04-14 19:33:29 发布

沐歌丨丶

最新推荐文章于 2024-04-14 19:33:29 发布

阅读量347

点赞数

分类专栏：前端文章标签： js dom javascript jquery

本文链接：https://blog.csdn.net/muge1161105403/article/details/106639622

版权

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

如题：.一个ul钟有一千个li，每一个li都需要触发js操作。如何降低重复的事件绑定，从而降低性能消耗。
考点：事件委托。

为什么要事件委托：

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。

事件委托的原理

当给父元素添加事件监听器时，事件监听器会分析从子元素冒泡上来的事件，找到到底是哪个子元素的事件。

方式一：原生js

<body>
    <ul id="parent">
        <li>haha</li>
        <li>haha</li>
        <li>haha</li>
        <li>haha</li>
        <li>haha</li>
    </ul>


    <script>
        // 找到父元素，添加监听器...
        parent.addEventListener("click", function (e) {
            // e.target是被点击的元素!
            // window.event 的值是当前正在处理的事件对象。
            let target = e.target || window.event.srcElement
            // IE下：window.event.srcElement  
            // 标准下：event.target
            // 如果被点击的是li元素
            if (target && target.nodeName == "LI") {
                console.log("被点击了");
            }
        });
    </script>
</body>

IE下：window.event.srcElement  
 
标准下：event.target

方式二：jQuery ---->delegate()


```clike

```clike

```javascript

```javascript
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  $("div").delegate("button","click",function(){
    $("p").slideToggle();
  });
});

</script>
</head>
<body>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

沐歌丨丶

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js事件委托--面试考点

如题：.一个ul钟有一千个li，每一个li都需要触发js操作。如何降低重复的事件绑定，从而降低性能消耗。考点：事件委托。为什么要事件委托：在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大
复制链接

扫一扫