JavaScript之事件委托实例(附原生js和jQuery代码)_网络技术

JavaScript之事件委托实例(附原生js和jQuery代码)

发布时间 - 2026-01-11 02:27:33 点击率：次

事件委托的原理依赖于事件冒泡，可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。

使用事件委托的优点

1、操作子元素时不用一一遍历，可以根据事件触发的对象而进行相应操作

dom结构如下：

<ul id = "oUl">
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li> 
 <li class = "item"></li>
</ul>

当li被点击时，打印该li的值。

在我们还没有学事件委托的时候我们会遍历所有li并给它们添加一个click事件，比如这样：

var aLi = document.getElementsByTagName('li');

for(var i = 0; i < aLi.length; i++) // 遍历li
 aLi[i].addEventListener('click', function() { //给每个li添加事件
 console.log(this.innerHTML); 
 });

学了事件委托之后js原生代码如下：

var oUl = document.getElementById('oUl');

oUl.addEventListener('click', function(ev) {
 ev = ev||window.event;
 var tag = ev.target; // 触发事件的对象保存在事件的target里面
 console.log(tag.innerHTML);
})

jQuery代码如下：

$('#oUl').on('click', '.item', function() { 
 console.log($(this).html()); // this指向oUl中触发了click事件并且class为item的子元素
})

相比之下，事件委托只需要获取父元素并且不需要遍历li，效率提高了不少。

2、将事件委托给父元素后，动态创建（删除）的子元素不用重新绑定（解绑）事件，实现了元素与事件的同步更新

在以往的js事件监听中，用js动态创建的子元素是没有事件的，必须重新为它们绑定事件，但是用事件委托就不用这么麻烦了，不需要重新绑定事件依旧可以实现事件监听。

当然事件绑定也是有弊端的，因为它依赖于事件冒泡，如果不支持冒泡那么就不能实现事件绑定了，不过我认为这种几率还是不高的。还有就是会发生事件误判，比如页面中的button1和button2的作用是点击时弹出值，而button3的作用是点击是页面变色，这三个button的同一个事件实现功能不同，当你将click事件委托给它们共同的父元素那么就会出现事件误判。

所以我认为事件委托是发生在一个子集合的事件功能相同的情况下，如果不相同则不要使用事件委托，以免弄巧成拙。

在实际开发中，掌握事件绑定对于代码的规范性以及效率会有一定提高，总的来说利大于弊。

以上这篇JavaScript之事件委托实例(附原生js和jQuery代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# js中的事件委托 # javascript事件监听与事件委托实例详解 # JavaScript事件委托原理与用法实例分析 # JS中的事件委托实例浅析 # JS实现为动态添加的元素增加事件功能示例【基于事件委托】 # js中的事件委托或是事件代理使用详解 # JS 事件绑定、事件监听、事件委托详细介绍 # JavaScript事件委托实现原理及优点进行 # 遍历 # 绑定 # 不需要 # 给大家 # 就会 # 还没有 # 是有 # 弄巧成拙 # 依赖于 # 有一定 # 我认为 # 可以通过 # 希望能 # 不高 # 弹出 # 就不能 # 不支持 # 因为它 # 只需要 # 可以实现

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：2026城乡居民医保集中缴费期是多久各地时间汇总说明

下一篇：厦门网页设计如何兼顾用户体验与视觉冲击力？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：2026城乡居民医保集中缴费期是多久各地时间汇总说明

下一篇：厦门网页设计如何兼顾用户体验与视觉冲击力？