目录搜索
jQuery Mobile 基础教程jQuery Mobile 安装jQuery Mobile 页面jQuery Mobile 页面切换jQuery Mobile 按钮jQuery Mobile 按钮图标jQuery Mobile 工具栏jQuery Mobile 可折叠块jQuery Mobile 网格jQuery Mobile 表单jQuery Mobile 表单jQuery Mobile 表单输入元素jQuery Mobile 表单选择菜单jQuery Mobile 表单滑动条jQuery Mobile 列表jQuery Mobile 列表视图jQuery Mobile 列表内容jQuery Mobile 事件jQuery Mobile 事件jQuery Mobile 触摸事件jQuery Mobile 滚屏事件jQuery Mobile 方向改变事件jQuery Mobile 实例jQuery Mobile Data 属性jQuery Mobile 图标jQuery Mobile 事件jQuery Mobile orientationchange 事件jQuery Mobile pagebeforecreate 事件jQuery 事件 方法jQuery bind() 方法jQuery blur() 方法jQuery change() 方法jQuery click() 方法jQuery dblclick() 事件jQuery delegate() 方法jQuery die() 方法jQuery error() 方法jQuery event.currentTarget 属性jQuery event.data 属性jQuery event.delegateTarget 属性jQuery event.isDefaultPrevented() 方法jQuery event.isImmediatePropagationStopped() 方法jQuery event.isPropagationStopped() 方法jQuery event.namespace 属性jQuery event.pageX 属性jQuery event.pageY 属性jQuery event.preventDefault() 方法jQuery event.relatedTarget 属性jQuery event.result 属性jQuery event.stopImmediatePropagation() 方法jQuery event.stopPropagation() 方法jQuery event.target 属性jQuery event.timeStamp 属性jQuery event.type 属性jQuery event.which 属性jQuery focus() 方法jQuery focusin() 方法jQuery focusout() 方法jQuery hover() 方法jQuery keydown() 方法jQuery keypress() 方法jQuery keyup() 方法jQuery live() 方法jQuery load() 方法jQuery mousedown() 方法jQuery mouseenter() 方法jQuery mouseleave() 方法jQuery mousemove() 方法jQuery mouseout() 方法jQuery mouseover() 方法jQuery mouseup() 方法jQuery off() 方法jQuery on() 方法jQuery one() 方法jQuery $.proxy() 方法jQuery ready() 方法jQuery resize() 方法jQuery scroll() 方法jQuery select() 方法jQuery submit() 方法jQuery toggle() 方法jQuery trigger() 方法jQuery triggerHandler() 方法jQuery unbind() 方法jQuery undelegate() 方法jQuery unload() 方法jQuery Mobile pagebeforehide 事件jQuery Mobile pagebeforeload 事件jQuery Mobile pagebeforeshow 事件jQuery Mobile pagecreate 事件jQuery Mobile pagehide 事件jQuery Mobile pageinit 事件jQuery Mobile pageload 事件jQuery Mobile pageloadfailed 事件jQuery Mobile pageshow 事件jQuery Mobile scrollstart 事件jQuery Mobile scrollstop 事件jQuery Mobile swipe 事件jQuery Mobile swipeleft 事件jQuery Mobile swiperight 事件jQuery Mobile tap 事件jQuery Mobile taphold 事件jQuery Mobile 页面事件jQuery Mobile CSS 类jQuery Mobile 主题jQuery Mobile 主题jQuery Mobile 图标
文字

jQuery on() 方法


实例

向 <p> 元素添加 click 事件处理程序:

$("p").on("click",function(){
alert("The paragraph was clicked.");
});
效果预览 »

定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

提示:如需移除事件处理程序,请使用 off() 方法。

提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。


语法

$(selector).on(event,childSelector,data,function,map)

参数 描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。

由空格分隔多个事件值。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。

在线实例

从 bind() 改为 on()
如何使用 on() 来达到与 bind() 相同的效果。

Changing from delegate() to on()
如何使用 on() 来达到与 delegate() 相同的效果。

从 live() 改为 on()
如何使用 on() 来达到与 live() 相同的效果。

添加多个事件处理程序
如何向元素添加多个事件处理程序。

使用 map 参数添加多个事件处理程序
如何使用 map 参数向被选元素添加多个事件处理程序。

在元素上添加自定义事件
如何在元素上添加自定义命名空间事件。

向函数传递数据
如何向函数传递数据。

向未来的元素添加事件处理程序
演示 on() 方法也适用于尚未创建的元素。

移除事件处理程序
如何使用 off() 方法移除事件处理程序。


上一篇:下一篇: