jQuery中delegate和on的用法与区别详细解析
2019/6/29 22:39:45
本文主要是介绍jQuery中delegate和on的用法与区别详细解析，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
在jQuery1.7中 .delegate()已被.on()取代。对于早期版本，它仍然使用事件委托的最有效手段。
在事件绑定和委派，delegate()和on在一般情况下，这两种方法是等效的。
.delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
复制代码 代码如下:
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, [selector], data, handler );
例如：.delegate() code:
复制代码 代码如下:
$("table").delegate("td","click",function(){
alert("hello");
});
.on() code:
复制代码 代码如下:
$("table").on("click", "td", function() {
alert("hi");
});
PS: 两者区别是seleter和events顺序不同
delegate和on方法被选元素的子元素必须是"合法的"子元素。比如
复制代码 代码如下:
$("table").delegate("button","click",function(){...});
$("table").on("click", "p", function(){...});
就不起作用，因为正常情况下，table子元素应为tr,td...
on(events,[selector],[data],fn)，参数[selector]是可选，
一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
例如：
复制代码 代码如下:
$("table").on("click", ".td1", function() {
alert("hi");
});
过滤class为td1的table子元素
而delegate的selector是必需的。
这篇关于jQuery中delegate和on的用法与区别详细解析的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-03-06jquery对css样式（jquery中的css方法）-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧：如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax，sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器，bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习
