JS 事件委托

什么是事件委托

  • 事件委托,就是将本来 A 处理的事情,委托给 B 来处理,也称为事件代理。
  • 每个函数都是对象,占用内存。内存中的对象越多,性能越差。解决处理过多问题的办法是事件委托。
  • 事件委托是通过事件冒泡来实现的,只指定一个事件处理程序,就可以管理某一类型的所有事件。

事件委托的实现

示例1

需求:当鼠标悬浮在 li 元素上,li 元素背景变成红色,离开时,去掉背景
不使用事件委托

<body>
    <ul class="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script>
        window.onload = () => {
            let oUl = document.querySelector('.ul')
            let aLi = oUl.getElementsByTagName('li')

            for (let i = 0; i < aLi.length; i++) {
                aLi[i].onmouseover = function () {
                    this.style.background = 'red';
                }
                aLi[i].onmouseout = function () {
                    this.style.background = '';
                }
            }
        }
    </script>
</body>

这种方法需要 通过 for 循环遍历每个 li ,占用监听内存,如果 li 较多,会导致性能变差。而且不能监听动态元素。

使用事件委托

<script>
        window.onload = () => {
            let oUl = document.querySelector('.ul')
            oUl.onmouseover = function (e) {
                e = e || window.event
                let target = e.target || e.srcElement
                if (target.nodeName.toLowerCase() === 'li') {
                    target.style.background = 'red'
                }
            }
            oUl.onmouseout = function (e) {
                e = e || window.event
                let target = e.target || e.srcElement
                if (target.nodeName.toLowerCase() === 'li') {
                    target.style.background = ''
                }
            }
        }
    </script>

推荐阅读更多精彩内容

  • 什么是事件委托? 举个例子,我们要实现点击 li 时打印其id 一般我们会给每一个li绑定一个事件处理函数 这种方...
    寒o_0阅读 308评论 0 1
  • 什么是事件委托 事件委托就是将子级事件委托给父级,父级监听这个事件,如果事件触发,父级会通过 event.targ...
    bestCindy阅读 80评论 0 0
  • 1. 事件是什么 DOM事件即为Event对象。Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的...
    取个名字还真滥阅读 122评论 0 1
  • 起因: 1、这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的; 2、其实我一直都没弄明白,写这个一是为了...
    Bonne_nuit阅读 157评论 0 2
  • 第一组:杨昊 真干货——Js事件委托 一份好的代码,不仅仅要写的美观,还要性能卓越。事件委托可以说就是这样一种—...
    胡諾阅读 456评论 1 3
  • 一直以来,对js的一些概念还是不清晰的,很多都没有搞明白,今天无意间在群里见他们提起事件委托,所以查找了一些资料,...
    蝴蝶结199007阅读 210评论 1 3
  • 在上学期间,我们宿舍的人经常会点外卖到宿舍里吃,外卖小哥会把外卖放到宿舍楼门口的桌子上。通常我们会自己一个人一个人...
    KarnoLiu阅读 44评论 0 0
  • 事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document)。原理...
    krystal_H阅读 326评论 0 0
  • 一 概念理解   事件:Html Dom使JavaScript有能力对HTML事件作出反应。比如点击事件、鼠标...
    蜗牛_Cy阅读 281评论 0 2
  • 原文地址:http://icaoguo.com/2018/12/05/%E4%BB%80%E4%B9%88%E6%...
    大赚佬阅读 1,365评论 0 0
  • 首先灵魂三问:是什么?为什么?怎么做? 事件委托是什么? 要理解事件委托我们先来了解下事件捕捉和事件冒泡: 当一个...
    要历练的嗯哼阅读 482评论 0 1
  • 前言 事件委托,也叫事件代理,是js事件中的一种常用技巧。事件委托的原理就是利用冒泡事件的机制,为一些节点的祖先节...
    zkhChris阅读 437评论 0 3
  • 事件委托的使用地点 事件委托的原理 jQuery中封装耳朵事件委托 问题 将ajax请求回来的数据动态的拼接到ht...
    我不叫奇奇阅读 115评论 0 4
  • 我们收取快递有两种方法:一是在特定的地点等快递的到来,二是委托人代收。现实当中,我们大都采用委托的方案。而委托人接...
    饥人谷_oathy阅读 688评论 0 2
  • 1,什么是事件委托 ? 通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件...
    Starkchen阅读 58评论 0 0
  • 《闭上眼睛才能看清楚自己》这本书是香海禅寺主持贤宗法师的人生体悟,修行心得及讲学录,此书从六个章节讲述了禅修是什么...
    宜均阅读 8,598评论 1 25
  • 前言 Google Play应用市场对于应用的targetSdkVersion有了更为严格的要求。从 2018 年...
    申国骏阅读 59,156评论 14 98
  • 本文转载自微信公众号“电子搬砖师”,原文链接 这篇文章会以特别形象通俗的方式讲讲什么是PID。 很多人看到网上写的...
    这个飞宏不太冷阅读 5,785评论 2 15
  • 反正对于那些不在乎我的人,误会我的人。我再怎么努力,他们的看法也不会有所改变。
    Leeanran阅读 2,721评论 1 5
  • 《来,我们说说孤独》 1·他们都在写孤独 一个诗人 如果 不说说 内心的孤独 不将孤独 写进诗里 是不是很掉价呢 ...
    听太阳升起阅读 2,837评论 0 6