良许Linux教程网 干货合集 讲解一下js事件委托

讲解一下js事件委托

js事件委托有的说法也叫事件代理。它可以让我们添加监听器到父元素上,来避免监听每个子元素。下面我们通过一个简单的例子来说明js事件委托。

image-20220827221127803

实现原理:js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上。事件委托就是,本来加在子元素身上的事件,加在了其父级身上。父级那么多子元素,怎么区分事件本应该是哪个子元素的?答案是event对象里记录的有“事件源”,它就是发生事件的子元素。它存在兼容性问题,在老的IE下,事件源是 window.event.srcElement,其他浏览器是 event.target。

现在一个列表里有几千个子元素,我们想要鼠标移动到一个子元素上将其背景变为灰色。

"container">
    "list">  
  • item1
  •  
  • item2
  •  
  • item3
  •  
  • item4
  •  ................  
  • item2000

我们可以通过遍历li元素,然后给每个元素添加鼠标滑动事件修改背景色。这种方法当li元素较少时不会有什么问题,但是元素如果很多就会使页面变得很卡。

现在换一种方式,把鼠标移动事件作用到ul上,然后使用 event.target来检查是哪个元素被获得事件。

// 事件委托,将鼠标移动事件作用到li的父元素ul上
var ule = document.getElementsByTagName('ul')[0];
ule.onmouseover = function(ev) {
var ev = ev || window.event; // 兼容IE浏览器
var uli = ev.srcElement || ev.target;
// 判断事件源是不是li,如果是才修改背景。如果不做判断,当移动到ul上时也会修改背景
if (uli.nodeName.toLowerCase() == 'li') {
 uli.style.background = 'gray';
}
}
ule.onmouseout = function(ev) {
var ev = ev || window.event; // 兼容IE浏览器
var uli = ev.srcElement || ev.target;
if (uli.nodeName.toLowerCase() == 'li') {
 uli.style.background = '';
}
}

现在通过监听li的父元素,然后通过获得事件的target属性操作元素背景。但是这样会发现还是有一个问题,当鼠标移动到ul上时会使整个ul背景修改掉。因此需要加一个判断nodeName时li时才修改背景色。

事件委托有哪些优点:

\1. 效率高,不用for循环为子元素添加事件了

\2. js新生成的子元素也不用新为其添加事件了,程序逻辑上比较方便

对于第二个优点我们遇到的应该比较多,例如当我们需要在ul中动态添加几个li时,如果用传统的方法,for循环为li添加事件,问题就出现了,最开始有的li是有onmouseover和onmouseout事件的,但是后来动态生成的li里没有这两个事件处理函数,因为for循环的时候它还没生成。只能再生成li后再绑定事件,真是麻烦的很。而事件委托的方式就没事,当后来动态生成的li出现的时候,不用做改变,移到它身上,还是变色的,因为事件是绑定在ul身上的。

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
x
x