`

十七、delegate和on

 
阅读更多

/*
 * 由于live事件写法很怪,所以在1.4之后提供了delegate来完成事件委派
 * $("#content")表示的是作用域,第一个参数表示的是绑定对象
 * 此时live就不再被使用了,在未来的版本live会被取消
 * 目前如果要做事件委派可以有多种方法,使得事件的调用选择很多,JQuery在1.8之后
 * 就统一使用onoff来替代bind,live和delegate
 */
$("#content").delegate(".ccc","click",function(event){
    alert($(this).html());
});
$("#content").append("<div class='ccc'>bbbbb</div>");
$("#abc").append("<div class='ccc'>bbbbb</div>");

 

 

//此时on的第二个参数没有设定,就认为是对.ccc绑定
//这显然就是模拟了bind
//$(".ccc").on("click",runc);
//当第二参数有值的时候,调用的对象就作为委派根对象
$("#content").on("click",".ccc",runc);

$("#content").append("<div class='ccc'>dddddd</div>");
$("#abc").append("<div class='ccc'>dddddd</div>")

 

 

 

 

 

分享到:
评论

相关推荐

    jQuery中delegate与on的用法与区别示例介绍

    在讨论jQuery中事件委托的相关技术时,我们经常需要考虑两种主要的方法:delegate()和on()。尽管从jQuery 1.7版本之后,.delegate()方法已经被.on()方法所取代,但在早期的jQuery版本中,这两种方法都广泛被用于实现...

    jQuery中delegate和on的用法与区别详细解析

    在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的。 .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 代码如下:// jQuery 1.4.3+$...

    delegate.js-JavaScript资源

    delegate.js JavaScript delegate.js on()once()off() delegate.js API jQuery delegate.js API

    Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on(),有些同学会对这四者存在一些疑虑,所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料,...

    jQuery中bind(),live(),delegate

    这个例子和`delegate()`类似,但`on()`是jQuery推荐的方法,因为它更加高效且功能强大。 总结来说,`bind()`适用于静态页面元素的事件绑定,`live()`适用于动态元素,`delegate()`提供了更好的性能控制,而`on()`...

    JS delegate与live浅析

    在jQuery 1.7之后,推荐使用on方法来替代live和delegate方法。on方法是一种更灵活、更强大的方式,它不仅可以实现事件委托,还可以绑定多个事件处理器。其基本用法如下: ```javascript $("#list").on("click", "td...

    Delegate.Office365.Common.WorkflowActions:Delegate.Office365.Common.WorkflowActions 提供了一系列自定义工作流操作来补充 SharePoint Online 和 SharePoint 2013 上的现有操作,可作为 WSP 包部署到任何 SP.Web

    Delegate.Office365.Common.WorkflowActions提供了一系列自定义工作流操作来补充 SharePoint Online 和 SharePoint 2013 上的现有操作,可作为 WSP 包部署到任何 SP.Web。 文档 网页服务 调用 OData Web 服务 自动...

    preact-dom-delegate:实现preact的dom事件委托

    preact 8,Preact X 可以使用安装$ npm i -S preact-dom-delegate使用说明在 JSX DOM 上设置 on 属性,值为委托处理方法,该方法会传入一个委托对象 delegate,仿照 jQuery 写法,使用 delegate.on(events, selector...

    jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

    本文主要探讨了四个常用的事件绑定方法:bind(), live(), delegate(), 和 on(),并提供了实例来帮助理解它们的区别和用途。 1. **bind()**: - `bind()` 是最基础的事件绑定方法,用于向匹配的元素添加一个或多个...

    jQuery事件绑定on()、bind()与delegate() 方法详解

    本文将详细讲解jQuery中三种常用的事件绑定方法:`on()`, `bind()`, 和 `delegate()`。 首先,`bind()`是jQuery早期版本中用于添加事件处理程序的方法。它的基本语法是: ```javascript $("selector").bind(event...

    jQuery中的.bind()、.live()和.delegate()之间区别分析

    最后需要指出的是,随着jQuery的更新,.live()和.delegate()方法已被废弃,推荐使用.on()方法来替代。.on()方法提供了更为灵活的事件委托机制,它允许开发者在任何父元素上绑定事件,这样就可以更容易地管理事件监听...

    jQuery中 delegate使用的问题

    在旧版本的jQuery中,`live()` 也是一个类似的功能,但随着版本更新,`live()` 已经被弃用,现在推荐使用 `delegate()` 或 `on()`。 `delegate()` 的基本语法如上所述: ```javascript $(selector).delegate(child...

    Query中click(),bind(),live(),delegate()的区别

    在现代jQuery应用中,通常推荐使用`on()`方法,它是`bind()`, `live()`, 和`delegate()`的综合替代品,提供更强大的功能和更好的性能。例如: ```javascript $(document).on('click', 'a', function() { alert('...

    jQuery中delegate()方法的用法详解

    `delegate()`方法在jQuery 1.4.2版本中引入,但在1.7版本后被`on()`方法取代,尽管如此,理解`delegate()`的用法仍然是重要的,因为许多现存的代码库和教程中仍然会使用它。 `delegate()`的基本语法如下: ```...

    jQuery事件 delegate()使用方法介绍

    live()方法已在jQuery 1.7之后被废弃,而delegate()方法也被推荐不再使用,取而代之的是on()和off()方法。 使用delegate()方法的一个示例是,如果你想为一个动态生成的列表中的每个元素绑定点击事件,而列表本身是...

Global site tag (gtag.js) - Google Analytics