一.事件处理

方法名

说明

语法 (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. 大话设计模式--适配器模式 Adapter -- C++实现实例

    1.适配器模式: 将一个类的接口转换为客户希望的另一个接口,使得原来由于接口不能一起工作的那些类一起工作. 适配器模式一般用于希望复用一些现存的类,但是接口又与复用环境要求不一致的情况. 适配器模式分 ...

  2. R语言编程中的常见错误

    R语言编程中的常见错误有一些错误是R的初学者和经验丰富的R程序员都可能常犯的.如果程序出错了,请检查以下几方面. 使用了错误的大小写.help().Help()和HELP()是三个不同的函数(只有第 ...

  3. 常用的SQL 总结

    1.去重 SELECT * FROM my where id in(SELECT MAX(id) from my GROUP BY id,iid,pid)//取 id,iid,pid重复的最大值

  4. 七 Django框架,models.py模块,数据库操作——F和Q()运算符:|或者、&并且——queryset对象序列化

    F()可以将数据库里的数字类型的数据,转换为可以数字类型 首先要导入 from django.db.models import F from django.shortcuts import rende ...

  5. GeoServer基础教程(二):GeoServer的Web管理界面快速入门

    转载:http://blog.163.com/daimiao_study/blog/static/248923117201542522742373/ GeoServer的控制和管理是基于网页形式,所有 ...

  6. 大数据_学习_01_Hadoop 2.x及hbase常用端口及查看方法

    二.参考资料 1.Hadoop 2.x常用端口及查看方法

  7. 3.1 第一个场景 HelloWorldScene

    HelloWorldScene.h #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #include "cocos ...

  8. Ffmpeg转码研究一

    Ffmpeg是一款功能强大的视频处理工具,那么转码肯定不是问题的,因为项目的需求,对转码进行了研究.刚开始首先去看了ffmpeg源代码中的一个例子transcode.c,但是发现该例子更应该称之为re ...

  9. windows下用vs2010编译ffmpeg

    转载自;http://q1q2q3q4q5q6ln.blog.163.com/blog/static/500794332014666536283/ (注意:请务必先阅读:七,后记补充:) ffmpeg ...

  10. nginx uwsgi wsgi django 这些东西究竟是什么关系

    有太多的文章告诉我们nginx uwsgi django 这些东西怎么用了,太多的人知道这些东西的怎么使用,怎么配置,怎么优化,但是还是有一部分人比如我这种水货不知道这些东西到底是啥,为啥一个项目的发 ...