JQuery知识快览之二—事件
事件是脚本语言的核心。本文将为大家介绍JQuery支持的一些事件和如何自定义事件
JQuery内置事件
1.Document加载事件
JQuery提供了ready，load，unload三个Document加载事件。load和unload事件从1.8版开始就不赞成使用了，ready可以说是我们用得最多的一个事件。这是一个最特别的事件，所有的JQuery语句的执行都始于ready事件。一般都在这个事件的响应函数里绑定其他的响应函数，执行代码等。
相对于JavaScript的load事件来说，ready事件更优，因为load事件是在一个页面的所有资源，如图片等都下载完成以后发生，而ready事件在DOM下载完成后就发生了。
它有多种使用形式：
$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )
在用ready事件时需要注意如下四点
1)ready函数的位置:如果脚本依赖于CSS属性，则需要在引入css文件之后引入脚本文件，如果脚本依赖于某个资源，则需要用load事件。
2)<body onload="">属性和JQuery的ready，load事件冲突，不要一起使用。
3)不要使用.on("ready",handler)来代替.ready函数。
4)$和其他库中定义冲突时，可用如下形式写代码:
jQuery( document ).ready(function( $ ) {
// Code using $ as usual goes here.
});
2.鼠标事件
click
dblclick
mousedown
mouseup
mousemove
mouseenter
mouseleave
mouseover
mouseout
hover
注意事项：
1)最好不要对同一元素同时添加click和dblclick事件的响应函数，因为对这两个事件的区分会造成一定的困扰
2)mouseenter,mouseleave和mouseover,mouseout的不同在于，当鼠标移动到某元素上或离开某元素时，其祖先节点也会接收到mouseover或mouseout事件，但是不会接收到mouseenter或mouseleave事件,所以推荐使用mouseenter和mouseleave。
3)hover是mouseenter,mouseleave的组合。
3.键盘事件
keydown
keyup
keypress
注意事项:
1)键盘事件只发送给当前的焦点元素，因为form常常能够得到焦点，所以我们常把事件绑定到form上，如果想实现快捷键，可以将事件绑定到document上。
2)当输入文本时适合用keypress，当快捷键时适合用keydown,keyup.
4.表单事件
focus
blur
focusin
focusout
change
select
submit
注意事项:
1)focusin,focusout和focus,blur的区别在于，当某元素获得或者失去焦点时，其祖先节点也会收到focusin或focusout消息，而不会收到focus或blur消息。
2)对选择框等元素，只要用户做出选择就会触发change事件，而对<textarea>等元素，当元素失去焦点时才有可能触发change事件。
3)select事件只针对<input type="text">和<textarea>的文本选取操作，设置文本的插入点并不会引起select事件，选择网页静态文本也不会引起select事件
5.浏览器事件
resize:浏览器窗口的resize事件，一次resize窗口的动作可能会引发多个resize事件。
scroll:浏览器窗口，可滚动的frame，有scroll属性的元素都能产生scroll事件
error：1.8版开始不赞成使用了
JQuery事件函数
JQuery针对每个事件，都至少定义了两个版本的事件函数，以click事件为例，JQuery定义了两种函数，都名为click，只是参数不同，一个函数用函数做参数，用于进行绑定事件处理函数，另一个函数不需要参数，用于触发事件。如
#("button").click(function(){
//do things when button clicked.
});
$("button").click();//trigger click event
有的触发事件的函数如select甚至能产生select行为，调用.select()能选中当前元素里的所有文本。
在事件处理函数中，可以用带参数的函数形式来获取event中的数据，可以用$(this)来获取触发事件的对象。下面看一个简单的例子
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click demo</title>
<style>
div {
float: left;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<ul>
<li>click me</li>
<li>click me</li>
</ul>
</div>
<script>
$("ul li").click(function(event){
$(this).html("Mouse clicked at pos:"+event.pageX+","+event.pageY);
});
</script>
</body>
</html>
JQuery事件对象
在上面的例子中我们用到了事件对象里的属性，下面我们来简单看一下事件对象有哪些属性(部分个人认为重要的属性，不全):
target
currentTarget(不推荐)
注意:this和currentTarget都是绑定事件的对象，对于delegated events，则是selector匹配的元素。而target是真正触发消息的对象。target为currentTarget对象或其子孙节点。
relatedTarget获取相关对象，如对于mouseleave事件，相关对象是获得mouseenter事件
注意:target,currentTarget,relatedTarget和this都是DOM元素，还需要要用$来转化为JQuery能操作的对象，如
$(event.currentTarget).css("background-color","red");
pageX
pageY
which
对于mousedown和mouseup事件来说，1代表左键，2代表中间键，3代表右键
对于键盘事件来说，则是对应的ASCII码
altKey
ctrlKey
shiftKey
metaKey
type
data:数据传入方式为.click( [eventData ], handler(eventObject) )
JQuery的事件执行流程
一个事件触发后，JQuery将先查看触发该事件的元素是否有绑定对应的消息处理函数，如果有则按消息处理函数的绑定顺序依次执行，当该元素的事件都处理完了后，如果该事件是冒泡事件，则依次向其父节点进行冒泡的过程，继续检查父节点，父节点的父节点。。。最后再执行该消息的默认响应行为。
通过对事件对象执行一定的操作，能改变这个流程。
event.preventDefault();可以禁止消息的默认响应行为。
event.stopImmediatePropagation();禁止之后的消息处理函数和冒泡过程，不禁止默认响应行为。
event.stopPropagation();不禁止之后的消息处理函数和默认响应行为，但是禁止冒泡过程。
在函数里return false;效果和event.preventDefault()+event.stopPropagation()一样。甚至你可以直接用false来代替一个return false的函数，如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click demo</title>
<style>
div {
float: left;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<ul>
<li><a href="baidu.com">link</a></li>
</ul>
</div>
<script>
$("li").click(false);
</script>
</body>
</html>
下面三个函数分别判断上面三个函数是否已经执行。
event.isDefaultPrevented()
event.isImmediatePropagationStopped()
event.isPropagationStopped()
自定义事件
在某些情况下，你可能需要定制你自己的事件，下面是JQuery官网给的一个简单的示例：
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );
如果不想用自定义数据，可简单的写成这样
$( "#foo" ).on( "custom", function() {
alert("custom event happened");
});
$( "#foo").trigger( "custom");
事件进阶
前面，我们看到用on来绑定了一个自定义事件，用trigger来触发了这个自定义事件，其实JQuery为事件的绑定和触发提供了一些更复杂的处理方法，下面我们来学习一下。
1.事件的触发
JQuery提供了trigger和triggerHandler两种触发事件的函数。
.trigger会为其选择器中所有的元素触发事件，且事件会进行冒泡处理，但是不会引起事件的默认行为。
.triggerHandler只会为其选择器中的第一个元素触发事件，且事件不会进行冒泡处理，也不会引起事件的默认行为。
另外两个函数的返回值也是不一样的。
2.事件处理函数的绑定和解绑定
1.7版新增了on和off两个函数来进行事件处理函数的绑定和解绑定，这两个函数基本代替了原有的bind,unbind和delegate,undelegate的功能，所以现在JQuery官方推荐用on和off来替代另两组函数。
1)on有两种形式
.on( events [, selector ] [, data ], handler(eventObject) )
.on( events [, selector ] [, data ] )
其中第二种形式的参数events可以是事件字符串和相应处理函数的数组，个人不喜欢这种形式，觉得看着乱，不如多写几个on呢。
当不提供selector时，为直接绑定模式，当事件传递到被绑定的对象时，就会被触发。
当提供selector时，为代理绑定模式，当事件传递到被绑定的对象时，会检查在冒泡过程中，是否存在满足selector条件的元素，如果有，则会被触发，没有则不会触发。
为什么需要有代理绑定模式呢？有两个对代理绑定模式需求的情景：
a.因为进行事件绑定的时候，被绑定的对象必须已经存在，所以对于那些会动态加入的元素，就可以用代理绑定模式，将事件绑定到其已经存在的最接近的祖先节点上。
b.某父节点下有多个节点需要响应同一个事件。这时使用代理绑定模式能提高效率。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click demo</title>
<style>
div {
float: left;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<ul>
<li><a href="baidu.com">link</li>
</ul>
</div>
<script>
$("ul").on("click",$("a"),function(){
alert("a is clicked");
});
$("li").click(function(){
alert("li is clicked");
}); </script>
</body>
</html>
2)off函数和on函数相对，也有两种形式，且支持直接绑定和代理绑定两种模式。
JQuery提供了根据事件名称，空间，选择器，和事件处理函数的组合条件来删除事件绑定的各种便利方式。
3)one函数，消息绑定只被触发一次就会被移除。特别的是在代理绑定模式中，只要事件传递到被绑定的对象，不管是否被触发，都会移除消息绑定。
JQuery知识快览之二—事件的更多相关文章
- JQuery知识快览之三—JQuery对象集
本文讲述JQuery对象集的各相关知识 获取JQuery对象集 JQuery对象,和DOM对象是两个不同的东西,JQuery对象可以是DOM对象的封装,但是JQuery对象不只是DOM对象的封装,它还 ...
- JQuery知识快览之五—操作属性和结构
前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法. prop还是attr? 从JQuery1.6版开始,新增了prop方法来获取和设 ...
- JQuery知识快览之四—样式
前面我们获取了对象集,本文介绍怎么控制对象集的样式 基本概念 在一个html页面中,我们有两种方式来控制一个对象的样式,用HTML attribute控制,或者用CSS类来控制,这两种方法虽然都能控制 ...
- JQuery知识快览之一—选择器
阅读指导:本文参考最新的1.10.2版写成,针对用得比较多的1.4版,所有1.5版之后的函数都会注明哪一版新增.对于熟悉1.4版想学1.10版的请直接搜索"新增". JQuery是 ...
- 【OC语法快览】二、存取方法
Accessors 存取方法 All instance variables are private in Objective-C by default, so you should use acces ...
- 最全的jQuery知识汇总
本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...
- jQuery 知识体系
jQuery基础知识一 jQuery之知识二-选择器 [jQuery知识]jQuery之知识三-过滤器 [jQuery知识]jQuery之知识四-DOM和CSS操作 [jQuery知识]jQuery之 ...
- jQuery知识重构
jQuery知识重构 目录: 一.入口函数 1 $(document).ready(function(){}); 2 $(function(){}); jQuery ...
- jquery实现一些小动画二
jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- java中DriverManager跟DataSource获取getConnection有什么不同?
1.datasource是与连接池获取连接,而DriverManager是获取与数据库的连接! DriverManager类的主要作用是管理注册到DriverManager中的JDBC驱动程序,并根据 ...
- Dive into python 实例学python (1) —— 函数和测试
odbchelper.py def buildConnectionString(params): """Build a connection string from a ...
- centos 6.4下安装postgresql 9.2
我的linux版本是centos 6.4 ,准备安装postgresql 9.2 根据官方说明: http://www.postgresql.org/download/linux/redhat/ 缺省 ...
- mysql 执行状态分析 show processlist
SHOW PROCESSLIST显示哪些线程正在运行.您也可以使用mysqladmin processlist语句得到此信息.如果您有SUPER权限,您可以看到所有线程.否则,您只能看到您自己的线程( ...
- (转)json+flexgrid+jbox组合运用页面刷新<jsp>
插件效果 1.JSP页面 1 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- Java基础(43):Java中的Object类与其方法（转）
Object类 java.lang.Object java.lang包在使用的时候无需显示导入,编译时由编译器自动导入. Object类是类层次结构的根,Java中所有的类从根本上都继承自这个类. O ...
- 控件ListView
ListView的简单用法,先在布局文件中添加ListView控件: 接下来修改MainActivity中的代码: 由上面的代码可以知道,数据是无法直接传递给ListView的,需要借助适配器来完成. ...
- bzoj3304 [Shoi2005]带限制的最长公共子序列
dp,时间复杂度O(n^3),f[i][j][k]表示a串到i,b串到j的时候,匹配了c串的k位,要用滚动数组 代码 #include<cstring> #include<algor ...
- SQL Server数据库性能优化（一）之 优化SQL 语句
最近工作上基本没什么需求(好吧 不是最近是好久了,所以随便看看基础的东西来填补自己的空白) 原文出自:http://www.blogjava.net/allen-zhe/archive/2010/07 ...
- ThinkPHP讲解（六）——添加数据
添加数据到数据库有三种方式 第一种:使用数组添加 $model=D("Info"); //实例化对象 //添加数据的第一种方式:使用数组添加 //要添加的数组,必须是关联数组,ke ...