jQuery事件绑定的四种方法
jQuery中提供了四种绑定事件的方法,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off:
一、on()方法(首选方法)
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
参数:
event:必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件
data:可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
function:可选。规定当事件发生时运行的函数。
map:规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
语法:$(selector).on(event,childSelector,data,function,map)
举例:给p元素添加单击事件
$("p").on("click",function(){ alert("The paragraph was clicked."); });
二、bind()方法
bind()作用就是在选择到的元素上绑定特定事件类型的监听函数,
参数:
type:必需。事件类型,如click、change、mouseover等;
data:可选。传入监听函数的参数,通过event.data取到。可选;
function:必需。规定当事件发生时运行的函数(监听函数),可传入event对象,这里的event是jQuery封装的event对象,与原生的event对象有区别,使用时需要注意。
map:规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数
语法:$(selector).bind(event,data,function,map)
举例:给<p>添加一个单击事件
$("p").bind("click",function(){ alert("单击p元素"); });
三、live()方法
live(),在版本 1.9 中被移除。请使用on()方法代替。添加一个或多个事件处理程序到当前或未来的被选元素。(还是总结在此)
参数:
event:必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data:可选。传递到该函数的额外参数
function:必需。当事件发生时,运行的函数
语法:$(selector).live(event,data,function)
举例:当点击按钮时,隐藏或显示 <p> 元素:
$("button").live("click",function(){ $("p").slideToggle(); });
四、delegate()方法
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
参数:
childSelector:必需。规定要添加事件处理程序的一个或多个子元素。
event:必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data:可选。传递到该函数的额外参数
function:必需。当事件发生时,运行的函数
语法:$(selector).delegate(childSelector,event,data,function)
举例:当单击 <div> 元素内部的 <p> 元素时,改变所有 <p> 元素的背景颜色:
$("div").delegate("p","click",function(){ $("p").css("background-color","pink"); });
最新文章
- 【编程题目】和为 n 连续正数序列
- centos安装php
- css省略号
- Gulp, 比Grunt更好用的前端构建工具
- Sqlserver常用的时间函数---GETDATE、GETUTCDATE、DATENAME
- struts2 ,web.xml中配置为/*.action,运行报错Invalid <;url-pattern>; /*.action in filter mapp
- div a 和 div >; a 的区别———后者指作用到div下一级的 a 标签 ,仅一级
- ThinkPHP第二十天(getField用法、常用管理员表结构、树形结构前小图标CSS)
- Linux内核启动及根文件系统载入过程
- FastCgi与Cgi
- 探索未知种族之osg类生物---渲染遍历之裁剪一
- jQuery Direct and delegated events 直接事件与委托事件
- POJ 1018
- * args 和 **kwargs
- 通过Get-Group导出组的成员
- [整理]ASP.NET vNext学习资源
- 【Java面试题】50 垃圾回收器的基本原理是什么?垃圾回收器可以马上回收内存吗?有什么办法主动通知虚拟机进行垃圾回收?
- html+css中常见的浏览器兼容性处理
- Educational Codeforces Round 41 (Rated for Div. 2) ABCDEF
- friend ---- public and private