一.事件处理

方法名

说明

语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器)

Bind(

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。没用on关键字

jQueryObject.bind( events [, data ], handler )

One

为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。只绑定一次

jQueryObject.one( events [, data ], handler )

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

Unbind

bind()的反向操作,从每一个匹配的元素中删除绑定的事件。

jQueryObject.unbind( [ events [, handler ]] )

jQueryObject.unbind( eventObject )

Trigger

可以使用trigger()方法来模拟操作。

jQueryObject.trigger( events [, data] )

jQueryObject.trigger( eventObject [, data] )

Triggerhandler

和trigger()方法类似,但只是触发第一个元素的事件

jQueryObject.triggerHandler( events [, extraArguments ] )

On

为指定元素的一个或多个事件绑定事件处理函数。

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

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

Off

用于解除由on()函数绑定的事件处理函数。

jQueryObject.off( [ events [, selector ] [, handler ] ] )

jQueryObject.off( eventObject [, selector ] )

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事件之事件处理函数的更多相关文章

  1. off(events,[selector],[fn]) 在选择元素上移除一个或多个事件的事件处理函数。

    off(events,[selector],[fn]) 概述 在选择元素上移除一个或多个事件的事件处理函数. off() 方法移除用.on()绑定的事件处理程序.有关详细信息,请参阅该网页上deleg ...

  2. on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

    on(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数.大理石平台精度等级 on()方法绑定事件处理程序到当前选定的jQuery对象中的元素 ...

  3. 获取或设置当前窗口contextmenu事件的事件处理函数

    在浏览器中 鼠标右键点击会显示默认的 自带的菜单,那么如何禁止 和更改呢? 1)  禁止右键 window.oncontextmenu = funcRef; //funcRef是个函数引用 列子: w ...

  4. JavaScript:理解事件、事件处理函数、钩子函数、回调函数

    详情请点击 http://www.jianshu.com/p/a0c580ed3432

  5. 松软科技课堂:jQuery 事件函数

    jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法.术语由事件“触发”(或“激发”)经常会被使用. 通常会 ...

  6. 关于jQuery事件绑定

    转自:http://www.cnblogs.com/gaojun/p/3497582.html html: <a href="#" onclick="addBtn( ...

  7. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  8. jquery事件学习笔记(转载)

    一.页面载入1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向wi ...

  9. 4月12日学习笔记——jQuery事件

    下面是在 jQuery 中最常使用的 bind()方法举例:$("#testDiv4").bind("click", showMsg); 我们为 id 是 te ...

随机推荐

  1. Hive- Hive 的基本操作

    创建数据库 create database db_hive; use db_hive; create database if not exists db_hive_02; create databas ...

  2. HTML5 canvas save()和restore()方法讲解

    我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的.第一步是用默认设置画一个大四方形,然后保存一下状态.改变填充颜色画第二个小一点的白色四方形,然后再保存一下状态.再次改变填充颜色 ...

  3. 分享知识-快乐自己:Liunx 安装MySQL

    第一步: 1):下载mysql安装包:这里选择下载版本 5.6.33,通用版,linux下64位 http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql- ...

  4. php 二维数组验证一个值是否存在

    php 判断数字在二维数组里 $arr = array( array('a', 'b'), array('c', 'd') ); in_array('a', $arr); // 此时返回的永远都是 f ...

  5. rabbitmq-交换机

    四种交换机: direct fanout topic headers http://www.jianshu.com/p/469f4608ce5d

  6. list dict set comprehension 列表推导式 (字典推导式,集合推导式)

    从一个list生成新的list [ word.upper() for word in 'hellO worlD!' ] 简单的语法,如果不用list comprehension, 则要用更长的代码. ...

  7. POJ2096Collecting Bugs(数学期望,概率DP)

    问题: Ivan is fond of collecting. Unlike other people who collect post stamps, coins or other material ...

  8. 1143. Lowest Common Ancestor (30)

    The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both U ...

  9. [JSOI 2015] 最大公约数

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4488 [算法] 不妨首先枚举左端点 注意到对于任意一个正整数n , 其质因子个数是l ...

  10. Gson小记

    Gson过滤字段,只要在字段前面添加“transient”关键字即可:之前就是因为Channel字段序列化的时候导致了stack over异常.