jquery事件委托_jQuery委托事件绑定不起作用？_js 事件委托 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jQuery事件委托

在jQuery中，事件委托是一种优化事件处理的技术，它利用事件冒泡的机制，将事件处理程序绑定到一个父级元素上，从而减少事件处理函数的数量，并实现对动态添加的子元素的事件处理。什么是事件委托？...事件委托是一种将事件处理程序绑定到父级元素上的技术，它利用事件冒泡机制，当子元素触发事件时，事件会冒泡到父级元素，从而触发绑定在父级元素上的事件处理程序。...通过事件委托，我们可以避免为每个子元素都绑定事件处理程序，而是将事件处理集中在父级元素上，从而减少了事件处理函数的数量，提高了性能和代码的可维护性。为什么使用事件委托？...提高性能：由于事件委托将事件处理程序绑定到父级元素上，避免了为每个子元素都绑定事件处理程序的开销，从而提高了性能。如何使用事件委托？在jQuery中，我们可以使用on()方法结合选择器来实现事件委托。...事件委托的优点和适用场景事件委托有以下优点：减少事件处理函数的数量，提高代码的可维护性和性能。可以处理动态添加的元素，无需手动重新绑定事件处理程序。可以统一管理事件处理程序，使代码更加简洁和易于维护。

1.1K1 0

jquery 事件委托 - delegate()

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。...事件委托的写法 $(function(){ $list = $('#list'); $list.delegate('li', 'click', function() {...因为这个最后第6个li标签是在绑定click()事件之后创建的，所以这种写法，怎么点击第6个li标签都不会触发click()事件。改写使用事件委托的方式，则第6个li标签可以触发click事件 ?...采用父节点#list使用事件委托的方法，可以绑定新增的click()节点事件。因为这个是利用事件冒泡的原来来实现的。...DOCTYPE html> <script type="text/javascript" src="<em>jquery</em>-3.4.0.

1.7K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

JavaScript 事件委托以及jQuery对事件委托的支持

jquery 对事件委托的支持在jQuery里对事件委托的支持，有以下几个函数： ?...delegate(selector,[type],[data],fn) jquery 的delegate 方法是典型的为事件委托准备的。...jQuery还有另外一种方式：将元素的事件处理委托给DOM根节点来处理，这种方式是live()方式： live(type, [data], fn) type : 事件类型 data ：附加的额外数据...fn : 相应的处理函数描述：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。...备注：自jQuery1.9后就废除这个函数，只能在jQuery1.9以前的版本中使用。

8236 0

jQuery第二十九篇事件委托

/jquery-1.10.1.min.js"> $(function() { //什么是事件委托...console.log($(this).html()); }); */ /* 在jQuery...中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件 */.../* 以下代码的含义, 让ul帮li监听click事件之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件...之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁

2424 0

事件委托

事件委托也称事件代理，在jQuery里面就称为事件委派。事件委托就是把事件监听放在祖先元素（如父元素、爷爷元素）上。...由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。...事件委托的原理不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利事件用冒泡的原理影响设置每个子节点事件委托作用绑定事件越多，浏览器内存占用越大，严重影响性能只操作一次DOM...事件委托实现 dianwo dianwo dianwo dianwo dianwo...image.png 事件委托的优点： 1.减少事件注册，节省内存。在table上代理所有td的click事件。在ul上代理所有li的click事件。 2.可以监听动态生成的元素。

8822 0

委托与事件-委托事件案例（三）

前言　　这两天一直在想如何结合实际案例来结束委托与事件的讲解，下面讲解两个事例，用来加深对委托及事件的理解。事例一（分页功能）　　本场景是用来讲解使用的，具体内容功能需自行填补实现。...用委托加事件来实现分页功能的通用。按上一节讲解中的逻辑处理，分为订阅者和发布者，一样的可以先定义订阅者感兴趣的对象，然后发布者，订阅者。再就是主程序调用。...public event PageActionEventHandler PageAction; //定义保护方法判断委托事件是否为空,传入参数e类型为EventArgs...; } } } 谨记，事件基于委托，为委托提供了一种发布/订阅机制。理解发布订阅机制就会容易多了。一旦理清楚，发现好像也并不是很难的。...总结　　委托与事件到这里就大结局了。一些列的问题也解决了。心中的疑惑也揭开了。下面我们就接着基础系列写其他的了。　　曾经，我们懵懵懂懂地看完了狮子王，知道有个勇敢坚强的小狮子叫辛巴。

8672 0

事件委托

事件委托 1. 基本概念事件委托，简单的来说，就是把一个元素的响应事件的函数委托到另一个元素。...前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？ 2. 事件传播事件的传播分为三个阶段：「捕获阶段」、「目标阶段」、「冒泡阶段」。...事件委托的好处减少内存消耗试想一下，如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件。...因此，比较好的方法就是把这个点击事件绑定到他的父层，然后在执行事件的时候再去匹配判断目标元素。所以事件委托可以减少大量的内存消耗，节约效率。...如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的。

8722 0

javaScript事件委托

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。 2、DOM 事件流：冒泡事件流、捕获事件流。 3、DOM 事件模型：捕获、目标、冒泡。那什么是事件委托呢？...事件委托：即是，一个事件本来是要绑定到某个元素上，然而却绑定到了该元素的父（或祖先）元素上，利用事件冒泡原理，触发执行效果。二、事件委托的优点：那为什么要使用事件委托？...事件委托有什么好处，以及使用时要注意什么？事件委托大概有两个优点： 1、提高网页性能。 2、通过事件委托添加的事件，对后期生成的元素依然有效。上面提到的第二点如何理解呢？...三、事件委托的使用方法：使用上面 ul 的例子进行事件委托给每个 li 绑定事件，示例代码： var ul = document.querySelector("ul"); ul.onclick =...注意：事件代理可能带来的隐患，当页面非常复杂的情况下，非常容易引起混乱，特别是当多种（个）事件通过事件委托绑定到同一个元素上时。

1.1K5 0

js事件委托

概念事件委托也叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。...动态绑定：新生dom节点如果用原来的方式是无法绑定事件的，用委托的方式这方面可以轻松实现，保证父元素存在即可。...原理利用事件冒泡，而冒泡指的就是事件从向上传递事件，如果事件有相应的函数绑定就会执行其绑定函数。...举例：ul下的li元素有绑定事件，我们通过ul绑定委托之后，委托的源码部分会在其执行函数内针对事件源进行筛选判定是否符合筛选条件（是否是li），然后针对的获取属性或者内容，进行相关的操作。...从这里可以看到没有直接针对特定元素绑定事件，而是对事件源进行匹配，所以不存在新生元素无事件的问题。

3.3K3 1

委托和事件

现在你已经对委托有了初步了解，是时候对上面的例子做个改进了。...程序一如预料地那样输出了： Morning, Jimmy Zhang 早上好, 张子阳现在，假设我们需要使用上一节学到的知识，将多个方法绑定到同一个委托变量，该如何做呢？...此时，轮到Event出场了，C# 中可以使用事件来专门完成这项工作，我们改写GreetingManager类，它变成了这个样子：很容易注意到：MakeGreet 事件的声明与之前委托变量delegate1...看到这里，你差不多明白到：事件其实没什么不好理解的，声明一个事件不过类似于声明一个委托类型的变量而已。...gm.GreetPeople(“Jimmy Zhang”, gm.MakeGreet); //编译错误2 } public class GreetingManager{ //这一次我们在这里声明一个事件

6552 0

事件委托和this

它将我们从对特定元素的事件监听中释放出来，如果没有事件冒泡，我们需要监听很多不同的元素来确保捕获到想要的事件。事件委托事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。...通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。...有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工作流程来处理事件，并支持事件捕获和事件冒泡。...订阅发布模式　　还有其它实现事件委托的方法可以考虑，其中值得一提的就是发布/订阅模型。发布/订阅模型也称为了广播模型，牵涉到两个参与者。...发布/订阅模型也能自定义事件。发布/订阅模型从一个元素发送消息后并向上遍历，有时也向下遍历，DOM会通知遍历路径上的所有元素事件发生了。在下面的示例中，JQuery通过trigger方法传递事件。

8093 0

委托与事件

1、面向对象：.net把委托（函数指针）定义为类型，具体的类名为委托名称，并且存在继承关系：自定义委托<--System.MulticastDelegate<--System.Delegate。　　...当委托实例指向某个实例方法时，_target指向实例对象，_methodPtr指向实例方法的JIT STUB（如果经过了JIT编译，就直接指向实例方法的内存地址），_methodPtAux为0；当委托实例指向某个静态方法时...事件　　　　　　　　　　　　　　　　　　　　　　　　　　　　事件跟委托有许多相似之处，经常不知道使用哪一个，这里着重说明两者的区别。...委托对象定义为public后不仅所属类内部能调用，类外部也能调用；事件不管即使定义为public，也只能在所属类的内部触发，而类外部只能订阅不能触发事件。...总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　使用事件可以降低耦合度，事件的触发与事件的订阅分离，让感兴趣的对象订阅某个对象的全部或部分事件。

8816 0

委托与事件-委托详解（一）

前言　　说起委托和事件，我就想起了再学校的时候，当时死记硬背去记什么是委托什么是事件。记得当时蝼某人问我，委托是什么？...在这个例子中都是返回的string，都是无参数的委托链（多播委托）　　上面我们简单的介绍了下委托及其用法，这里我们可以了解一下委托链，顾名思义，委托链也就是委托连续，啥意思呢？...注意，委托链（多播委托）--委托的签名必须返回void，否则就只能得到委托调用的最后一个方法的结果。...= LouBuy.LouBuyWater;//表示返回string类型，参数也是string类型的一个方法总结　　以前总在说委托与事件，都没有一次去了解熟悉它，现在得好好巩固一下了。...到这里就介绍完了委托，看上去也挺简单的。我们下一节继续看Event事件。然后结合委托一起看看委托加事件如何运用的。

1.2K2 0

Js 事件委托（事件代理）

一、概述事件委托，又叫事件代理。事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例子：有三个同事预计会在周一收到快递。...这里其实还有2层意思：第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。...二、为什么是使用事件委托一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？...三、事件委托原理事件委托利用的是事件冒泡原理，将事件绑定到父级元素上，当点击子元素时，通过事件冒泡将事件传递到父级元素。四、总结：那什么样的事件可以用事件委托，什么样的事件不可以用呢？...适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

11.4K3 0

委托事件模型

事件机制：在用户使用键盘、鼠标等设备进行操作时，实际上每一次的操作都是在发起一个事件。...委托事件模型：用户通过键盘、鼠标等设备进行操纵的行为，最终都传递给了虚拟机，虚拟机接收到这些事件后的处理方案，就称之为事件模型。...就是将监听器委托到主题上，主题一旦发生变动所有的监听器都会进行响应并处理事件。如图： ? 实现步骤：实现步骤是先建立一个事件源对象，也就是GUI的各种组件，然后为事件源对象选择合适的监听器。...例如按钮这个对象，在按钮身上发生的最多的就是点击事件，这时就应该选择点击事件的监听器，这个事件的监听器是一个接口所以要写一个类去实现它。 ...：事件基本分为两类 l 是基本事件：鼠标和键盘事件 l 是语义事件：由组件根据自身业务所定出的事件

8872 0

事件与委托（一）

一、详细内容（1）什么是委托（Delegates）？委托是一个对象，它知道如何调用一个方法。...委托的定义:委托类型定义了委托实例可以调用的那类方法，具体来说，委托类型定义了方法的返回类型和参数。..."; } （2）委托实例把方法赋值给委托变量的时候就创建了委托实例。...方法是在运行时才赋值给委托变量的。（3）多播委托所有的委托实例都具有多播的能力。一个委托实例可以引用一组目标方法。...委托是不可变的使用-=或+=操作符时，实际上是创建了新的委托实例，并把它赋给当前的委托变量。如果多播委托的返回值不是void，那么调用者从最后一个被调用的方法来接收返回值。

4502 0

委托与事件-事件详解（二）

理解委托的一种好的方式是把委托视为是给方法的签名和返回类型指定名称。　　今天我们继续来了解委托和事件，现在我们来了解学习一下事件详解。...事件　　事件基于委托，为委托提供了一种发布/订阅机制，在.Net中随处可见到这种事件，例如在应用程序中，Button类提供了Click事件，这类事件就是委托。　　...事件的命令是委托去掉后缀EventHandler 　　　　四、继承了EventArgs需以EventArgs结尾　　下面我们一起来看一个简单的委托与事件案例委托与事件简单实例讲解　　假设现在电信公司提供一个话费流量查询的功能...发布者：　　　　一、声明一个委托　　　　二、基于委托声明一个事件　　　　三、一个判断事件是否为空，然后开始执行处理事件　　　　四、一个调用用来触发事件的方法 //先定义委托...总结　　我们仔细考虑下这整个委托与事件，事件的本质也就是对委托的一种使用。看我们事件注册绑定和多播委托的用法是一样的，事件的声明也是使用的委托类。　　大家好好想想其中的奥妙，然后理解消化下。

6052 0

什么是事件委托

---导文事件委托是一种在软件开发中常用的设计模式，用于处理事件和回调函数。它允许一个对象（委托对象）将特定事件的处理责任委托给另一个对象（代理对象），从而实现解耦和灵活性。...在传统的事件处理模型中，对象通常直接注册并处理事件。但在事件委托模式中，委托对象不直接处理事件，而是将事件发送给代理对象进行处理。...通过事件委托，你可以在父元素上监听事件，并根据事件发生的目标元素（子元素）来执行相应的操作。这样做的好处有：减少事件处理程序的数量：使用事件委托可以减少需要绑定事件处理程序的元素数量。...具体而言，事件委托包含两个主要角色：委托对象：负责定义事件的声明和触发机制。它维护一个事件的注册列表，可以允许其他对象注册对该事件感兴趣的回调函数。代理对象：实际处理事件的对象。...当事件发生时，委托对象将事件转发给代理对象，并由代理对象执行相应的回调函数。通过使用事件委托，可以实现以下优势：解耦：委托对象不需要了解具体的事件处理逻辑，只需负责触发和传递事件。

2262 0

事件与委托（二）

一、详细内容事件Event，使用委托的时候，通常会出现两个角色，一个广播者，一个订阅者。广播者，这个类型包含一个委托字段，广播者通过委托来决定什么时候进行广播。...一个订阅者不知道和不干扰其它的订阅者事件是一种结构，为了实现广播者/订阅者模型，它只暴露了所需的委托特性的部分子集。事件的主要目的就是防止订阅者之间相互干扰。...最简单的声明事件的方式就是在委托前面加上event关键字。...PriceChangedEventArgs(decimal oldVal,decimal newVal) { OldPrice = oldVal; NewPrice = newVal; } } （3）为事件选择或定义委托...第一个参数表示事件的广播者，第二个参数包含需要传递的信息；名称必须以EventHandler结尾（4） system.eventHandler Framework定义了泛型委托system.eventHandler

3152 0

JavaScript-事件委托（事件代理）

今天给自己的知识结构填个坑，再复习下JS的事件代理。事件代理可以给JS批量生成的DOM元素添加事件，并且还可以提高效率，因为你确实不用给每个DOM节点添加事件监听了。...事件的监听器，是被添加到了它们的父元素上，监听器会分析从新生成的子元素上冒泡上来的事件，并找到是哪个子元素的事件。...id="li-4">li 4 li 5 li 6 那么，当每个子元素被点击的时候，会发生不同的事件...那么这时，你需要把事件监听器放在它们的父容器 ulId 上面。这时，当子元素被点击的事件，冒泡到父元素Li上的时候，你就可以通过检查事实的target，从而获取真正被点击的节点元素的引用。...现在大部分JS都会使用jQuery等工具库来处理DOM事件，但对于事件委托的背后原理，我们还是要了解的。浅谈数据结构 - 字典

88610 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭