您的位置：首页 > Web前端 > JQuery

jQuery.on() 函数详解

2016-05-07 10:06 731 查看
本文转自：http://www.365mini.com/page/jquery-on.htm

on()
函数用于为指定元素的一个或多个事件绑定事件处理函数。

此外，你还可以额外传递给事件处理函数一些所需的数据。

从jQuery 1.7开始，
on()
函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。

即使是执行
on()
函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过
on()
绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

该函数属于
jQuery
对象(实例)。

语法

jQuery 1.7 新增该函数。其主要有以下两种形式的用法：

用法一：

jQueryObject.on( events [, selector ] [, data ], handler )

用法二：

jQueryObject.on( eventsMap [, selector ] [, data ] )



参数

参数描述
eventsString类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMapObject类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数
events
)，属性值对应绑定的事件处理函数(参数
handler
)。
selector可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为
null
或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
data可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handlerFunction类型指定的事件处理函数。
关于参数
selector
，你可以简单地理解为：如果该参数等于
null
或被省略，则为当前匹配元素绑定事件；否则就是为当前匹配元素的后代元素中符合
selector
选择器的元素绑定事件。

参数
handler
中的
this
指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数
selector
等于
null
或被省略，则
this
指向当前匹配元素(也就是该元素)。

on()
还会为
handler
传入一个参数：表示当前事件的Event对象。

参数
handler
的返回值与DOM原生事件的处理函数返回值作用一致。例如"submit"(表单提交)事件的事件处理函数返回
false
，可以阻止表单的提交。

如果事件处理函数
handler
仅仅只为返回
false
值，可以直接将
handler
设为
false
。



返回值

on()
函数的返回值为jQuery类型，返回当前jQuery对象本身。

重要说明：

如果传递了
selector
参数，那么
on()
函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器
selector
参数的元素绑定事件处理函数。
on()
函数并不是直接为这些后代元素挨个绑定事件，而是委托给当前jQuery对象的匹配元素来处理。由于DOM
2级的事件流机制，当后代元素
selector
触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器
selector
，jQuery就会捕获该事件，从而执行绑定的事件处理函数。

示例&说明

// 这里的选择器selector用于指定可以触发事件的元素
// 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"代理"的形式触发事件。

// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").click( [ data ,] handler );

// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").bind( "click" [, data ], handler );

// jQuery 1.3+ (1.4+支持参数data)
$("selector").live( "click" [, data ], handler );

// jQuery 1.4.2+
$("ancestor").delegate( "selector", "click" [, data ], handler );

// jQuery 1.7+
$("ancestor").on( "click", "selector" [, data ], handler );


请参考下面这段初始HTML代码：

<div id="n1">
<p id="n2"><span>CodePlayer</span></p>
<p id="n3"><span>专注于编程开发技术分享</span></p>
<em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>


我们为<div>中的所有<p>元素绑定点击事件：

// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
$("div").on("click", "p", function(){
// 这里的this指向触发点击事件的p元素(Element)
alert( $(this).text() );
});


如果要绑定所有的<p>元素，你可以编写如下jQuery代码：

//为所有p元素绑定click事件处理程序(注意：这里省略了selector参数)
//n2、n3、n5均可触发该事件
$("p").on("click", function(event){
// 这里的this指向触发点击事件的p元素(Element)
alert( $(this).text() );
});


此外，我们还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据，我们可以通过jQuery为事件处理函数传入的参数
event
(Event事件对象)来进行处理：

var data = { id: 5, name: "张三" };

// 为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
// 附加数据可以是任意类型
$("body").on("mouseenter mouseleave", "#n5", data, function(event){
var $me = $(this);
var options = event.data; // 这就是传入的附加数据
if( event.type == "mouseenter"){
$me.html( "你好，" + options.name + "!");
}else if(event.type == "mouseleave" ){
$me.html( "再见!");
}
});


此外，即使符合条件的元素是
on()
函数执行后新添加，绑定事件对其依然有效。同样以初始HTML代码为例，我们可以编写如下jQuery代码：

// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
$("div").on("click", "p", function(event){
alert( $(this).text() );
});

// 后添加的n6也可以触发上述click事件，因为它也是div中的p元素
$("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');


参数
events
还支持为事件类型附加额外的命名空间。当为同一元素绑定多个相同类型的事件处理函数时。使用命名空间，可以在触发事件、移除事件时限定触发或移除的范围。

function clickHandler(event){
alert( "触发时的命名空间:[" + event.namespace + "]");
}

var $p = $("p");

// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下
$p.on( "click.foo.bar", clickHandler );

// B：为所有p元素绑定click事件，定义在test命名空间下
$p.on( "click.test", clickHandler );

var $n2 = $("#n2");

// 触发所有click事件
$n2.trigger("click"); // 触发A和B (event.namespace = "")

// 触发定义在foo命名空间下的click事件
$n2.trigger("click.foo"); // 触发A (event.namespace = "foo")
// 触发定义在bar命名空间下的click事件
$n2.trigger("click.bar"); // 触发A (event.namespace = "bar")
// 触发同时定义在foo和bar两个命名空间下的click事件
$n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")

// 触发定义在test命名空间下的click事件
$n2.trigger("click.test"); // 触发B (event.namespace = "test")

// 移除所有p元素定义在foo命名空间下的click事件处理函数
$p.off( "click.foo" ); // 移除A


on()
函数的参数
eventsMap
是一个对象，可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下：

var data = { id: 5, name: "张三" };

var events = {
"mouseenter": function(event){
$(this).html( "你好，" + event.data.name + "!");
},

"mouseleave": function(event){
$(this).html( "再见!");
}
};

//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
$("body").on(events, "#n5", data);


自从jQuery添加了on()和off()方法之后，基本跟事件有关的操作不再使用其他诸如$(‘xxx').click(function(){});之类的了。

jQuery的api里面on里面支持的事件列出来，共享给大家：

代码如下:
blur
focus
focusin
focusout
load
resize
scroll
unload
click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout
mouseenter
mouseleave
change
select
submit
keydown
keypress
keyup
error
contextmenu
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航