jQuery事件委派

chigetudouba

已于 2022-08-09 15:35:17 修改

阅读量528

点赞数

文章标签： jquery javascript 前端

于 2022-08-09 15:33:36 首次发布

本文链接：https://blog.csdn.net/chigetudouba/article/details/126248719

版权

1.将多个子元素的事件委托给父辈元素处理！

2.监听是加载了父辈元素上！

3.当操作任何一个子元素时，事件冒泡到祖先元素上

4.祖先元素不会直接处理时间，而是通过event.targrt得到发生事件的子元素，通过这个子元素调用事件回调函数！（虽然监听加载了祖先元素上，但此时的this是发生事件的具体子元素！

//通过共同的祖先元素为其添加事件
//如：为ul下的li添加单机li后，里的background颜色变为red

$('ul').delagate('li','click',function () {

    this.style.background = "red"
})

）

移除委派：

$('ul').undelegate('click')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chigetudouba

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件委派

jQuery仅小白观点~~~~
复制链接

扫一扫

《Android 开发艺术探索》笔记4--View事件分发与滑动冲突

行动者&&职业化

09-07

1945

思维导图View事件分发机制点击事件传递规则事件分发的源码解析View的滑动冲突滑动冲突的解决方式参看文章思维导图 View事件分发机制点击事件传递规则所谓点击事件的事件分发,就是对MotionEvent事件的分发过程,传递给某一个View. 在事件传递中有三个方法是贯穿始终的 dispatchTouchEvent():进行事件的分发如果事件能传递到View那么此方法一定会被调用,返回值受当前View的onTouchEvent()和下级View的dispatchTouchEvent()的影.

jquery 事件委托 - delegate()

DevOps海洋的渔夫@专栏

04-25

319

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。一般绑定事件的写法 $(function(){ $ali = $('#list li'); $ali.click(function() { $(this).css({ba...

参与评论您还未登录，请先登录后发表或查看评论

JQ 为未来元素添加事件处理器—事件委托

weixin_30823227的博客

03-15

491

随着DOM结构的复杂化和Ajax等动态脚本技术的运用，有了较多的动态添加进来的元素，直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到，在这里就需要用到事件委托方法，JQ为事件委托提供了live（）、dalegate（）和on（）方法。事件委托我们知道，DOM在为页面中的每个元素分派事件时，相应的元素一般都在事件冒泡阶段处理事件。在类似 body > div &...

前端提高篇(九十六)：jQuery事件高级使用及事件委托，Context都没弄明白凭什么拿高薪

最新发布

m0_60667010的博客

03-31

1027

世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它。

jQuery学习：事件处理（绑定事件解绑事件事件委派/委托））

weixin_47295886的博客

11-13

634

event.clientX event.clientY --相对于视口的左上角--也就是打开窗口的界面。event.offsetX event.offsetY--相对于事件元素的左上角。鼠标移入移出的方法mouseenter鼠标移入--mouseleave鼠标移除。event.pageX event.pageY--相对于页面的左上角。事件相关处理阻止事件冒泡:event.stopPropagation()绑定点击事件的两种方式 on(事件，回调函数) click。得到事件的坐标-首先是事件对象。

jQuery委托事件

qq_53810655的博客

04-12

716

jquery事件委托 $("").delegate("","",function(){}} 找到一个入口函数执行之间就有的元素来监听动态添加那些元素的某些事件例子： $("button" ).click(function () {$("ul"). append("<li>我是新增的li</li>") ;}) $("ul").delegate("li","click",function(){}} <body> <ul> <li>我

jQuery 通过事件委派一次绑定多种事件，以减少事件冗余

10-29

在给定的标题和描述中，我们关注的是如何使用jQuery进行事件委派，以及如何通过一次绑定来管理多种事件，以减少代码冗余，提高效率。事件委派是一种优化事件处理策略的技术，它允许我们在文档的高层级元素上绑定...

jQuery live( type, fn ) 委派事件实现

10-29

jQuery 的 `live()` 方法是针对动态添加元素的事件处理的一种解决方案，它首次在 jQuery 1.3 版本中引入。`live()` 的核心功能是允许开发者为当前存在以及未来可能添加到 DOM 中的元素绑定事件处理器。这种方法称为...

初窥JQuery(二) 事件机制(1)

12-10

　JQuery的事件处理机制包括：页面加载、事件绑定、事件委派、事件切换四种机制。我们先从$(document).ready()事件开始。　一、页面加载$(document).ready()相当与Javascript中的onLoad()事件，都是在页面加载的...

jquery中事件委派代码分析以及jQuery中delegate和on的用法与区别详细解析

weixin_34405925的博客

02-22

140

jquery中事件委派我们会使用到delegate与live方法了，下面我就以delegate与live方法为例子给各位分析一下jquery 事件委派的例子吧，希望例子能帮助到各位朋友。什么是jquery中的事件委派？在jquery中有一个很重要的概念——事件委派，相信很多搞前端开发的人都听说过，零度逍遥本来对此不是十分理解，但经...

JQuery事件委托(适用于给动态生成的脚本元素添加事件)

11-21

最近一段时间打了一个大仗，现在总算消停点，才有时间来做个总结吧算是：移动端遇到一个项目，是一个列表的侧滑栏，在我这里用jq写的交互事件。自测各方面都挺好的，美滋滋的给了研发。研发也美滋滋的开始开发。但是，好景不长。。。研发加了ajax事件后，我的交互效果有部分受了影响！一个小姑娘，在一群大老爷们研发堆里，对着昏暗的电脑和看不太懂的后台代码，改了半天。最后没解决。我就回来了。后来就找共同点，发现有个类名控制的交互都不能实现，最后去问研发，你是不是没加上我的类名？回：加着呢啊！我一看模拟器，确实加着呢。但是看源码，没有，因为他使用ajax后期加的。。所以一开始事件找不到“接头人”就没有

jQuery事件绑定（处理，委派，切换）

dly的博客

12-22

1234

jQuery事件绑定（处理，委派，切换）事件处理bind(type ,fn) 给当前对象绑定一个事件。例如：A.bind(“click”, fn ); 类型：A.click( fn ); unbind(type ) 解绑bind绑定事件 one(type ,fn ) 给当前对象绑定一次事件。 on(events , fn) 提供绑定事件处理程序所需的所有功能。完成3个方法功能.bind()

JS----简单的事件委派

Damys

01-04

5871

功能：事件委派实现--点击弹出 href的值 Opera Web Standards Curriculum Sitepoint A List Apart YUI Blog Blame it on the voices Oddly specific //事件委派1 (function(){ var resources = doc

JavaScript(JQ)事件委托以及JS闭包小记

lan_学习分享

06-17

1747

一开始看的时候有些晕，可以监听DOM元素的方法太多，主要是写在<script></script>，下面列出来理清楚: JS原生： document.getElementById("menuultest").onmouseover = function(ev){ }； JQ：该段参考自https://codeplayer.vip/p/j7sq1 // jQue...

JQ高级事件之事件委托

不忘初心

06-26

4704

事件委托跟字面意思一样，需要找一个东西来帮助一起完成某个东西。用我们JQ的语言来说就是，我有2000个按钮，但我们不能一个一个绑定，这样太过于浪费操作，那我们怎么做呢，事件默认情况下是冒泡的，我们可以把事件直接绑定他们的父元素，也就是说通过指定一个事件处理程序，就可以管理某一类的所有事件，这样我们可以通过event.target属性找到它实际点的是那个元素（这里说的是JS原生方法的实现），当然还

JQuery的事件委托

spec_yue

01-22

331

事件委托就是利用事件冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。事件委托首先可以极大的减少事件绑定次数，其次也可以让新加入的子集元素也拥有相同的操作。一般绑定事件的写法以及事件冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

javascript事件委托理解，jQuery .on()方法一步到位实现事件委托

orange0111的博客

11-13

3739

本篇文章借鉴自：博客园文章，只为自己巩固下事件委托方面的知识概述: 什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 === 事件委托，现在才知道这两个是一个意思）高程3上讲：事件委托即是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。借鉴其他大牛的一个例子，也为自己更好的理解一下：收快递例子有三个同事预计会在周一收到快递。为签收快递，有两种办法

jQuery事件委托

weixin_30527551的博客

12-27

一、事件委托简介 1、什么是事件委托事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 2、为什么要用事件委托　（1）考虑一个ul，在li的数量非常少的时候，为每一个li添...

对JS中事件委托的理解

weixin_33853794的博客

11-16

159

什么是事件委托：事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。(不理解冒泡的可以去百度下) 定义：利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。使用事件委托技术可以避免对特定的每个节点添加事件监听器，相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。事件委托的好处：...

jquery事件委托

12-29

事件委托是利用事件冒泡原理来实现的一种机制，可以通过给父元素添加事件处理程序来管理其子元素的事件。在jQuery中，可以使用`on()`方法来实现事件委托。下面是一个示例，演示如何使用jQuery事件委托： ```javascript // HTML结构 <div id="parent"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> // jQuery事件委托 $("#parent").on("click", "li", function() { console.log($(this).text()); }); ``` 在上面的示例中，我们给父元素`#parent`添加了一个点击事件处理程序，并指定了子元素`li`作为事件的目标元素。当点击子元素`li`时，事件会冒泡到父元素`#parent`，然后触发事件处理程序，并输出被点击的子元素的文本内容。通过使用事件委托，我们可以减少事件处理程序的数量，提高性能，并且可以动态地添加或删除子元素而不需要重新绑定事件。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交