jquery中如何使用事件委托?

最新推荐文章于 2022-12-13 14:01:05 发布
最新推荐文章于 2022-12-13 14:01:05 发布
阅读量532 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jquery 文章标签： jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chengxue_123/article/details/111087672
本文解析了当子元素与父元素同时存在事件监听时如何通过事件委托实现精确触发。具体介绍了事件委托的工作原理及其适用场景，特别是在子元素动态生成的情况下的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

 

当子元素有事件,父元素有事件,当点击子元素,子元素到底是执行子元素的事件还是父元素的事件了?会有冲突,要用到事件委托

也就是在子元素中点击执行当前区域子元素事件,在父元素区域内但是子元素区域外执行的是父元素事件

事件委托使用情况:子元素有事件,父元素有事件,子元素又是动态生成的情况下使用

语法:$(父元素标签).on('click等事件','子元素标签',function(e){}

在项目中用途:

 $("#listWdsq .mui-card").on("click", "#wdyy_qxyy", function (e) {

}

 

 

 

5、更多事件：深入探讨jQuery事件处理机制
github5actions的博客
06-09 251
本文深入探讨了jQuery事件处理机制，包括事件委托、事件传播、阻止默认行为、自定义事件以及优化事件处理等内容。通过实际案例分析和代码示例，帮助读者掌握如何高效地使用jQuery构建互动友好的Web应用，并为未来结合现代框架的开发提供了展望。
jQuery的事件绑定与事件委托
热门推荐
aiolos1111的专栏
07-28 1万+
在用jQuery的事件绑定时，会用到on()、bind()、live()、 delegate()这几个方法，但对他们的区别缺从未注意过，现稍总结一下，如有错误，欢迎指正。       参考文档： http://blog.youkuaiyun.com/xxd851116/article/details/8646899 http://www.jb51.net/article/57827.htm http://
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
11-21
最近一段时间打了一个大仗，现在总算消停点，才有时间来做个总结吧算是： 移动端遇到一个项目，是一个列表的侧滑栏，在我这里用jq写的交互事件。自测各方面都挺好的，美滋滋的给了研发。研发也美滋滋的开始开发。 但是，好景不长。。。 研发加了ajax事件后，我的交互效果有部分受了影响！ 一个小姑娘，在一群大老爷们研发堆里，对着昏暗的电脑和看不太懂的后台代码，改了半天。最后没解决。我就回来了。 后来就找共同点，发现有个类名控制的交互都不能实现，最后去问研发，你是不是没加上我的类名？ 回：加着呢啊！我一看模拟器，确实加着呢。但是看源码，没有，因为他使用ajax后期加的。。所以一开始事件找不到“接头人”就没有
jQuery中的事件委托
m0_48560510的博客
10-17 3095
什么是事件委托？ 事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。 为什么要用事件委托？ 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。 2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员..
jQuery：事件委托
qq_44353287的博客
10-25 513
原生js的事件委托： ul.onclick = function(e){//e指event,事件对象 var target = e.target || e.srcElement; //target获取触发事件的目标(li) if(target.nodeName.toLowerCase() == 'li'){//目标(li)节点名转小写字母，不转的话是大写字母 alert(target.innerHTML) } } jQuery中： 使用delegate()方法 $("ul").dele
jquery事件委托
qq_45378970的博客
10-02 372
事件委托 事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做， 这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 原理：利用冒泡的原理，把事件加到父级上，触发执行效果。 好处：减少事件注册，提高性能。 方法 定义和用法：delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件 发生时运行的函数。 语法：$(selector).delegate(childS
javascript事件委托理解，jQuery .on()方法一步到位实现事件委托
orange0111的博客
11-13 3848
本篇文章借鉴自：博客园文章，只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 === 事件委托，现在才知道这两个是一个意思） 高程3上讲：事件委托即是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 借鉴其他大牛的一个例子，也为自己更好的理解一下：收快递例子 有三个同事预计会在周一收到快递。为签收快递，有两种办法
jQuery事件绑定和委托实例
11-30
在新版本的jQuery中，推荐使用 `on()` 来实现事件委托： ```javascript // 使用 .on() 方法进行事件委托 $("table").on("click", "tr", function() { // 处理代码 }); ``` 总结，jQuery的事件绑定和委托提供了一...
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
10-23
在JavaScript和jQuery中，事件处理有两个关键概念：事件冒泡和事件委托。事件冒泡是指事件从最深的节点开始，然后逐级向上层元素传播事件。事件委托则是利用事件冒泡的特性，将事件处理器绑定到一个父元素上，以此来...
jQuery代码优化 事件委托篇
10-28
事件委托是JavaScript和jQuery中用于提高性能和减少内存消耗的技术，尤其在处理大量动态元素的交互时显得尤为关键。 在jQuery中，提供了一系列的方法来支持事件委托，包括`.bind()`、`.live()`和`.delegate()`。...
JQuery事件委托原理与用法实例分析
11-27
JQuery事件委托是一种高效处理大量动态元素事件绑定的技术，它基于JavaScript中的事件冒泡机制。在HTML结构中，事件通常会从最深的元素向上冒泡到其父元素，直至到达文档的根节点。事件委托就是利用这个特性，将事件...
JQuery中的事件委托
clear_love8的博客
05-05 395
事件委托：简单理解为，自己无法做到的事情，我们可以通过委托给其他人来完成，然后将结果反馈给我们自己 1.当未使用事件委托时，新增的li元素并不会触发点击事件，因为当入口函数执行时还没有新增的li元素，所以无法触发该元素的点击事件。 举例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charse...
jQuery 事件委托
weixin_43043455的博客
09-17 838
自从学习了jQuery，发现很多事件没办法记住，往往学着后面的忘着前面的，很苦恼，所以捡出一些容易忘记的方法单独记录在这里，以供日后复习用到。 我们在绑定事件时（比如点击事件），只能绑定在HTML页面已有的元素上（比如在上），当使用js创建新的div元素时，新的元素便没有这个事件，如果我想还有，那怎么办，这里就得用到事件委托。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html ...
jQuery之事件委托
呀呀呀
05-24 1090
事件绑定 .bind() 为所匹配元素的特定事件绑定事件处理函数 语法：bind(type,[data],fn) 有效率问题，等页面加载完成时，bind()方法才执行; 常适用于页面元素的静态绑定，需注意，只能给已存在元素的绑定事件，不能给即将新添的元素绑定事件 .live() 为被选元素添加一个或多个事件处理程序，需注意当这些事件发生时运行的函数 语法：live(type,[data],fn) live()只能放在直接选择的元素后，层级深就不能绑定事件 live()事件处理函数不会绑定在元
jQuery事件委托
m0_51435825的博客
12-13 1540
jQuery事件委托
jquery中的事件委托
dreams_deng的博客
02-05 3409
1. 什么是事件委托：子元素事件委托给父元素， 然后触发事件的时候找到对应的event.target触发元素进行的回调函数执行，通过事件冒泡功能： append以后的标签添加事件 <div id="box"> <div class="a">a 的事件委托</div> <br /> <br /> <br /> <div class="b">b的事件委托</di
JQuery的事件委托方法
生活步步是坎坷，笑到最后是大哥
07-28 5001
1.blind 定义和用法：主要用于给选择到的元素进行事件绑定 语法：blind(“事件类型”，function(){ }); 特点;适用于静态页面，只能给调用它时已存在的元素绑定，不能给未来新增的元素绑定 当页面加载完时，才进行blind； 2.live 定义：主要用于给选择到的元素进行事件绑定 语法：live(“事件类型”,函数名); 特点：live并没有将事件绑定到自身（this）上，而是绑...
jQuery-事件委托(基本概述+实例)
梁同学与Android
03-03 745
文章目录1.基本概述2.代码实例3.效果图 1.基本概述 (1)事件委托(代理/委派) ->将多个子元素(li)的事件监听委托给父辈元素(ul)处理 ->监听回调是加在了父辈元素上 ->当操作任何一个子元素(li)时，事件会冒泡到父辈元素(ul) ->父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素(li),通过这个子元素调用事件回调函数 (2...
jquery 事件委托绑定click的使用方法
weixin_33958366的博客
02-18 298
直接绑定ul的click事件  代码如下 复制代码 $("ul").click(function(e) 例子  代码如下 复制代码 $(function(){ //$("ul").on('click',this,function(e){ $("ul").click(function(e){  $target = $(...
jQuery中事件的使用场景在哪里？
最新发布
04-02
<think>好的，我现在需要回答用户关于jQuery中事件使用场景的问题。首先，我要确保自己正确理解用户的需求。用户可能对jQuery的事件处理机制不太熟悉，想知道在哪些情况下应该使用它。接下来，我需要回顾jQuery事件处理的基本概念和常见应用场景。 首先，jQuery是一个JavaScript库，简化了DOM操作和事件处理。事件处理是jQuery的重要功能之一，所以使用场景应该涉及用户与网页的交互。比如点击按钮、输入表单、鼠标移动等。 然后，我需要考虑用户可能关心的具体场景。例如，绑定事件、动态元素处理、事件委托、阻止默认行为、自定义事件等。这些都是jQuery事件处理的常见应用点。我要逐一分析这些场景，并给出简明扼要的解释。 接下来，我需要组织回答的结构。用户要求结构清晰，逐步解决问题，所以可能需要分点说明。每个使用场景作为一个小标题，然后详细说明其应用方式和示例。比如：DOM操作后的事件绑定、动态元素的事件委托、简化事件监听写法、跨浏览器兼容性处理、阻止冒泡和默认行为、一次性事件绑定、自定义事件触发、表单处理以及动画与事件的结合等。 同时，要注意用户提到的系统级指令，特别是关于LaTeX格式的要求。不过这个问题主要涉及编程，可能不需要数学公式，但如果有涉及数学的地方需要按照规则处理。不过在这个问题中，可能用不上数学表达式，所以可能不需要使用$...$或$$...$$格式。 还需要确保回答使用中文，语言通顺，技术点准确。避免使用复杂术语，或者如果使用，要解释清楚。比如事件委托、冒泡等概念，可能需要简单说明。 检查是否有遗漏的重要使用场景，比如移动端的事件处理，或者Ajax请求后的事件绑定。这些也是jQuery事件处理的一部分，应该包括进去。 最后，确保回答真实可靠，不误导用户。例如，jQuery在现代前端开发中的使用率可能有所下降，但对于遗留项目或简单交互仍然适用。可能需要提及这一点，但用户的问题主要是使用场景，所以重点还是介绍场景本身，而不是评价jQuery的现状。 总结下来，回答的结构应该是先简介jQuery事件处理的作用，然后分点列出常见使用场景，每个场景给出解释和例子，最后总结适用情况。确保每个部分清晰，帮助用户逐步理解不同的应用场景。</think>jQuery 的事件处理机制主要用于简化用户与网页元素的交互操作。以下是其核心使用场景及具体说明： --- ### 一、DOM 元素的事件绑定 **场景**：为静态元素（页面加载时已存在的元素）添加交互行为。 **示例**： ```javascript // 点击按钮时触发 $("#submitBtn").click(function() { alert("按钮被点击"); }); // 表单输入框获取焦点时改变样式 $("input.email").focus(function() { $(this).css("border", "2px solid blue"); }); ``` --- ### 二、动态生成元素的事件委托 **场景**：通过事件冒泡机制，为后续动态添加的元素绑定事件。 **原理**：使用 `.on()` 方法将事件绑定到父级静态元素。 **示例**： ```javascript // 为动态生成的 <li> 绑定点击事件 $("#todoList").on("click", "li", function() { $(this).toggleClass("completed"); }); ``` --- ### 三、事件监听的高效管理 **场景**：简化原生 JavaScript 的事件监听代码，支持链式调用。 **对比**： ```javascript // 原生 JavaScript document.querySelector("#btn").addEventListener("click", handleClick); // jQuery 链式调用 $("#btn").click(handleClick).css("color", "red"); ``` --- ### 四、跨浏览器兼容性处理 **场景**：自动处理不同浏览器（如 IE8）的事件差异。 **示例**： ```javascript // jQuery 自动统一事件对象 $("#link").click(function(e) { e.preventDefault(); // 兼容所有浏览器的阻止默认行为 }); ``` --- ### 五、复合事件与快捷方法 **场景**：提供组合事件（如 `hover()`）和简化高频操作。 **示例**： ```javascript // hover 等价于 mouseenter + mouseleave $(".menu-item").hover( function() { $(this).addClass("active"); }, // 进入 function() { $(this).removeClass("active"); } // 离开 ); // 一次性事件绑定（仅触发一次） $("#initBtn").one("click", initializeApp); ``` --- ### 六、表单交互增强 **场景**：处理表单验证、输入监听等常见需求。 **示例**： ```javascript // 实时监听输入内容 $("#searchInput").on("input", function() { const keyword = $(this).val(); search(keyword); }); // 表单提交拦截 $("#loginForm").submit(function(e) { if (!validateForm()) { e.preventDefault(); // 阻止无效提交 } }); ``` --- ### 七、自定义事件触发 **场景**：实现组件间通信或复杂交互逻辑。 **示例**： ```javascript // 定义自定义事件 $("#player").on("playbackFinished", showNextVideo); // 手动触发事件 $("#player").trigger("playbackFinished"); ``` --- ### 八、与动画的协同工作 **场景**：在动画完成后执行回调。 **示例**： ```javascript $("#box").fadeOut(500, function() { console.log("元素已隐藏"); }); ``` --- ### 适用性总结 1. **传统项目维护**：适合遗留系统或需快速开发的中小型项目。 2. **简单交互需求**：如表单验证、按钮点击等基础场景。 3. **快速原型开发**：通过简洁的 API 快速验证交互逻辑。 在现代前端框架（如 React/Vue）中，建议优先使用框架自身的事件机制，但理解 jQuery 事件处理仍有助于维护旧项目。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值