jQuery事件delegate()使用方法介绍
2023-06-13 09:14:40 时间
delegate定义和用法
delegate()方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用delegate()方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
参数
描述
childSelector
必需。规定要附加事件处理程序的一个或多个子元素。
event
data
可选。规定传递到函数的额外数据。
function
必需。规定当事件发生时运行的函数。
语法
$(selector).delegate(childSelector,event,data,function)
返回值:jQuerydelegate(selector,[type],[data],fn)
概述
指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
参数
selector,[type],fnString,String,FunctionV1.4.2
selector:选择器字符串,用于过滤器触发事件的元素。
type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
fn:当事件发生时运行的函数
selector,[type],[data],fnString,String,Object,FunctionV1.4.2
selector:选择器字符串,用于过滤器触发事件的元素。
type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data:传递到函数的额外数据
fn:当事件发生时运行的函数
selector,eventsString,StringV1.4.3
selector:选择器字符串,用于过滤器触发事件的元素。
events:一个或多个事件类型的字符串和函数的数据映射来执行他们。
示例
描述:
当点击鼠标时,隐藏或显示p元素:
HTML代码:
复制代码代码如下:
delegate()方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用delegate()方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
必需。规定附加到元素的一个或多个事件。
由空格分隔多个事件值。必须是有效的事件。
语法
$(selector).delegate(childSelector,event,data,function)
返回值:jQuerydelegate(selector,[type],[data],fn)
概述
指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
参数
selector,[type],fnString,String,FunctionV1.4.2
selector:选择器字符串,用于过滤器触发事件的元素。
type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
fn:当事件发生时运行的函数
selector,[type],[data],fnString,String,Object,FunctionV1.4.2
selector:选择器字符串,用于过滤器触发事件的元素。
type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data:传递到函数的额外数据
fn:当事件发生时运行的函数
selector,eventsString,StringV1.4.3
selector:选择器字符串,用于过滤器触发事件的元素。
events:一个或多个事件类型的字符串和函数的数据映射来执行他们。
示例
描述:
当点击鼠标时,隐藏或显示p元素:
HTML代码:
<divstyle="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
jQuery代码:
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
描述:delegate这个方法可作为live()方法的替代,使得每次事件绑定到特定的DOM元素。
以下两段代码是等同的:
$("table").delegate("td","hover",function(){$(this).toggleClass("hover");
});$("table").each(function(){$("td",this).live("hover",function(){$(this).toggleClass("hover");});
});
相关文章
- jquery和vue冲突吗_jquery和vue的区别
- jQuery 的 live() 方法对 hover 事件的处理详解编程语言
- Jquery实战_读书笔记1—选择jQuery
- JQuery插件模板制作jquery插件的朋友可以参考下
- jquery下onpropertychange事件的绑定方法
- jquery的冒泡事件的阻止与允许(三种实现方法)
- 事件冒泡是什么如何用jquery阻止事件冒泡
- 关于JQuery($.load)事件的用法和分析
- jquery触发a链接点击事件解决方案
- Jquery事件的连接使用示例
- jQuery事件的命名空间简单了解
- jquery中交替点击事件toggle方法的使用示例
- jQuery自定义事件的简单实现代码
- jQuery中阻止冒泡事件的方法介绍
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- JQuery实现表格动态增加行并对新行添加事件
- jquery设置style:display的方法
- jQuery实现单击和鼠标感应事件