jquery事件之事件处理函数

标签：

一.事件处理

1. on()和off()从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。jQuery推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件，那接着用one()吧，这个没有变化。推荐使用on() off().
// 为div中的所有p元素绑定click事件处理程序，只有n2、n3可以触发该事件：
$("div").on("click", "p", function(){
alert( $(this).text() );// 这里的this指向触发点击事件的p元素(Element)
});
即使符合条件的元素是on()函数执行后新添加，绑定事件对其依然有效：
$("div").append("<p id=‘n6‘>新添加的元素</p>");
为div中的n2绑定mouseenter mouseleave两个事件，并为其传入附加数据data:
var data={ id:5,name:"zhangjie" };//参数
$("div").on("mouseenter mouseleave","#n2",data,function(envent){
var options=envent.data; //传入的参数
if(envent.type=="mouseenter"){
alert("hello "+options.name);
}
else if(envent.type=="mouseleave"){
alert("bye");
}
});
或者：
var envents={
"mouseenter" : function(envent){
alert("hello " +envent.data.name);
},
"mouseleave" :function(envent){
alert("bye");
}
};
$("div").on(envents,"#n2",data);

2.off() 方法移除用.on()绑定的事件处理程序。
例子：
function btnClick1(){
alert(this.value+"-1");
}
function btnClick2(){
alert(this.value+"-2");
}
var $body=$("body");
$body.on("click","input:first",btnClick1);//按钮1绑定点击事件1
$body.on("click","input:last",btnClick2);//按钮2绑定点击事件2
//为所有a元素绑定click、mouseover、mouseleave事件
$body.on("click mouseenter moseleave","a",function(envent){
if(envent.type=="click"){
alert("点击事件");
}
else if(envent.type=="mouseenter"){
$(this).css("color","red");
}
else{
$(this).css("color","blue");
}
});
//$body.off("click","input:first",btnClick1); //移除按钮1绑定的点击事件
//$body.off("click"); 移除所有绑定的点击事件
//$body.off(); 移除所有事件
//$body.off("click","a"); //移除a的点击事件
$body.off("","a"); //移除a的所有事件

3.bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。
为<div>中的所有<p>元素绑定点击事件：
//为div中的所有p元素的click事件绑定事件处理函数只有n2、n3可以触发该事件
$("div p").bind("click", function(){
alert( $(this).text() );
});
// 新添加的n6不会触发上述click事件（与on不一样）
$("#n1").append(‘<p id="n6">上述绑定的click事件不会对该元素也生效!</p>‘);
还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据，我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理：
var data={id:1,name:"qin"};
$("#n5").bind("mouseenter mouseleave",data,function(envent){
var $me=$(this);
if(envent.type=="mouseenter"){
$me.html("<b>hello "+data.name+"</b>" );
}else if(envent.type=="mouseleave"){
$me.html(" bye ");
}
});
同理：
var eventsMap = {
"mouseenter": function(event){
$(this).html( "Hello!"+data.name);
},

"mouseleave": function(event){
$(this).html( "Bye!");
}
};
$("#n5").bind(eventsMap);//为n5绑定mouseenter mouseleave两个事件（bind绑定方法可以不加上data，但是on要加上）
4.one()函数用于为每个匹配元素的一个或多个事件绑定一次性事件处理函数。
// 只有第一次点击时，执行该事件处理函数
$("#btn").one("click",function(){
alert("只弹出一次");
});
// 在每个div元素上为其后代p元素的click事件绑定事件处理函数
// 只有n2、n3、n6、n7可以触发该事件
// n2和n3两者总共只能触发一次，n6和n7两者总共只能触发一次
$("div").one("click","p",function(){
alert($(this).text());
});
$("#n1").append(‘<p id="n9">上述绑定的一次性click事件也会对该元素也生效!</p>‘); //与bind不一样
还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据：
var data={id:1,name:"eric"};
$("#n4").one("mouseenter mouseleave", data, function(event){
var obj = event.data;
var $me = $(this);
if(event.type == "mouseenter"){
$me.html("<b>hello "+obj.name+" </b>" );
}else{
$me.html( ‘bye!‘ );
}
});
同理：
var eventsMap = {
"mouseenter": function(event){
$(this).html( "Hello!"+obj.name);
},

"mouseleave": function(event){
$(this).html( "Bye!");
}
};
$("#n5").one( eventsMap );//为n5绑定mouseenter mouseleave两个事件 （one和bind绑定方法可以不加上data，但是on和live要加上）
5.trigger()函数用于在每个匹配元素上触发指定类型的事件。
var $log = $("#log");
function handler( event, arg1, arg2 ){
var html = ‘<br>触发元素#‘ + this.id + ‘的[‘ + event.type +‘]事件，额外的函数参数为:‘ + arg1 + ‘, ‘ + arg2;
$log.append( html );
}
var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click", handler );
// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", handler );
// 触发所有button的click事件
$buttons.trigger("click");
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined
触发元素#btn2的[click]事件，额外的函数参数为:undefined, undefined
*/
$("#btn1").trigger("click", "CodePlayer");
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:CodePlayer, undefined
*/
// arg1 = "张三"， arg2 = 20
$("a").trigger("mouseover", ["张三", 20 ] );
/*(追加文本)
触发元素#a1的[mouseover]事件，额外的函数参数为:张三, 20
*/
$("a").trigger("mouseleave", { name: "张三", age: 18 } );
/*(追加文本)
触发元素#a1的[mouseleave]事件，额外的函数参数为:[object Object], undefined
*/
6.triggerHandler()函数用于在每个匹配元素上触发指定类型的事件。作用于trigger()函数相似，但triggerHandler()函数具有以下例外情况：不会触发执行元素的默认行为(例如链接click事件默认的跳转行为，表单submit事件默认的提交行为)，触发事件只针对jQuery对象中的第一个匹配元素，触发的事件不会在DOM树中冒泡，返回值是对应事件处理函数的返回值，而不是当前jQuery对象本身。
7.unbind()函数用于移除匹配元素上绑定的一个或多个事件的事件处理函数。主要用于解除由bind()函数绑定的事件处理函数。
$("#btn").unbind("click");//移除按钮的bind绑定的点击事件
$(":button").unbind();//移除所有按钮的事件

<body>
<div id="n1">
<p id="n2"><span>CodePlayer</span></p>
<p id="n3"><span>qinqin</span></p>
<em id="n4">http://www.365mini.com</em>
</div>
<p>id="n5">Google</p>
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<input id="btn" type="button" value="点击绑定一次" />
<div id="n2">
<p id="n6"><span>CodePlayer</span></p>
<p id="n7"><span>qinqin</span></p>
</div>
<div id="log"><div>
</body>

jquery事件之事件处理函数

标签：

原文地址：http://www.cnblogs.com/qinyi173/p/4957653.html