jQuery总结3（事件）
jQuery学习3（事件）
一、jQuery中的事件简介
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：在元素上移动鼠标、选取单选按钮、点击元素等。
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中：
在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
$("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素：
$("p").hide()。
如果网站包含许多页面，并且希望jQuery 函数易于维护，那么可以把 jQuery 函数放到独立的 .js 文件中，通过 src 属性来引用这个文件：
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当遵循以下原则时，代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
二、常用事件
1、click()
click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
实例
2、dblclick()
当双击元素时，会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
实例
3、focus()
当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
实例
4、mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
实例
5、mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
实例
6、mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
7、mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
实例
8、hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
实例
9、blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
实例
10、$(document).ready()和window.onload事件
$(document).ready()注册是事件处理程序会在DOM完全就绪并可以使用时调用.这意味着所有元素对脚本而言都是可以访问的,但是并不意味着所有关联的文件都已经下载完毕. 即当HTML下载完成并解析成DOM树后,代码就可以运行。
而window.onload意味着文档完全下载到浏览器中了。
一般来说,使用$(document).ready()要优于onload. 但是因为支持文件可能还没有加载完成,所以类似图像的高度和宽度这样的属性不一定有效. 如果需要访问这些属性, 可能需要选择实现一个onload事件处理程序, 使这两种机制能够和平共存.
三、事件的使用
1、绑定事件
on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。
另一种更简化的写法是直接调用click()方法：
两者完全等价。我们通常用后面的写法。
jQuery能够绑定的事件主要包括：
鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。
其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。
其中，ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。
假设我们想给一个<form>表单绑定submit事件，下面的代码没有预期的效果：
因为JavaScript在此执行的时候，<form>尚未载入浏览器，所以$('#testForm)返回[]，并没有绑定事件到任何DOM上。
所以我们自己的初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化：
这样写就没有问题了。因为相关代码会在DOM树初始化后再执行。
由于ready事件使用非常普遍，所以可以这样简化：
甚至简化成这样：
如果你遇到$(function () {...})的形式，牢记这是document对象的ready事件处理函数。
我们还可以反复绑定事件处理函数，它们会依次执行：
2、合成事件
我们知道，鼠标移入和鼠标移出这2个事件往往都是同时使用的，因此我们必须分别对“鼠标移入”和“鼠标移出”这2个事件分别定义。但是在jQuery中，我们可以使用hover()方法一次性地定义这2个事件，这就是所谓的合成事件。
$().hover(fn1,fn2)
参数fn1表示“鼠标移入”时触发的事件处理函数，参数fn2表示“鼠标移出”时触发的事件处理函数。
示例：
常用格式：
还有一个合成事件是toggle()。
toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个。
toggle() 的另一个作用: 切换元素的可见状态。
3、事件参数
有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息：
4、取消绑定
一个已被绑定的事件可以解除绑定，通过off('click', function)实现：
的是，下面这种写法是无效的：
为了实现移除效果，可以使用off('click')一次性移除已绑定的click事件的所有处理函数。
同理，无参数调用off()一次性移除已绑定的所有类型的事件处理函数。
5、事件触发条件
事件的触发总是由用户操作引发的。例如，我们监控文本框的内容改动：
当用户在文本框中输入时，就会触发change事件。但是，如果用JavaScript代码去改动文本框的值，将不会触发change事件：
有些时候，我们希望用代码触发change事件，可以直接调用无参数的change()方法来触发该事件：
input.change()相当于input.trigger('change')，它是trigger()方法的简写。
6、一次性事件
在jQuery中，我们可以使用one()方法为所选元素绑定一个“只触发一次”的处理函数。
语法：
$().one(type , fn)
说明：type表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。这里的type是一个字符串。fn表示事件的处理函数。
这里我们使用one()方法为按钮绑定了一个“只触发一次”的click事件。当我们第一次点击按钮之后会弹出对话框，但是第二次点击按钮就不会有任何反应。这就是one()方法的特点。
一、jQuery中的事件简介
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：在元素上移动鼠标、选取单选按钮、点击元素等。
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中：
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
$("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素：
$("p").hide()。
如果网站包含许多页面，并且希望jQuery 函数易于维护，那么可以把 jQuery 函数放到独立的 .js 文件中，通过 src 属性来引用这个文件：
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my_jquery_functions.js"></script> </head>
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当遵循以下原则时，代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
二、常用事件
1、click()
click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
实例
$("p").click(function(){
$(this).hide();
});
2、dblclick()
当双击元素时，会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
实例
$("p").dblclick(function(){
$(this).hide();
});
3、focus()
当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
实例
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
4、mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
实例
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
5、mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
实例
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
6、mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
实例
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
7、mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
实例
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
8、hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
实例
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
9、blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
实例
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
10、$(document).ready()和window.onload事件
$(document).ready()注册是事件处理程序会在DOM完全就绪并可以使用时调用.这意味着所有元素对脚本而言都是可以访问的,但是并不意味着所有关联的文件都已经下载完毕. 即当HTML下载完成并解析成DOM树后,代码就可以运行。
而window.onload意味着文档完全下载到浏览器中了。
一般来说,使用$(document).ready()要优于onload. 但是因为支持文件可能还没有加载完成,所以类似图像的高度和宽度这样的属性不一定有效. 如果需要访问这些属性, 可能需要选择实现一个onload事件处理程序, 使这两种机制能够和平共存.
(document).ready()可简写为(); 即:
$(function(){
//code here
});
三、事件的使用
1、绑定事件
on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。
// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
另一种更简化的写法是直接调用click()方法：
a.click(function () {
alert('Hello!');
});
两者完全等价。我们通常用后面的写法。
jQuery能够绑定的事件主要包括：
鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。
其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。
其中，ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。
假设我们想给一个<form>表单绑定submit事件，下面的代码没有预期的效果：
<html>
<head>
<script>
// 代码有误:
$('#testForm).on('submit', function () {
alert('submit!');
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
因为JavaScript在此执行的时候，<form>尚未载入浏览器，所以$('#testForm)返回[]，并没有绑定事件到任何DOM上。
所以我们自己的初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化：
<html>
<head>
<script>
$(document).on('ready', function () {
$('#testForm).on('submit', function () {
alert('submit!');
});
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
这样写就没有问题了。因为相关代码会在DOM树初始化后再执行。
由于ready事件使用非常普遍，所以可以这样简化：
$(document).ready(function () {
// on('submit', function)也可以简化:
$('#testForm).submit(function () {
alert('submit!');
});
});
甚至简化成这样：
$(function () {
// init...
$('#testForm).submit(function () {
alert('submit!');
});
如果你遇到$(function () {...})的形式，牢记这是document对象的ready事件处理函数。
我们还可以反复绑定事件处理函数，它们会依次执行：
$(function () {
console.log('init A...');
});
$(function () {
console.log('init B...');
});
$(function () {
console.log('init C...');
});
2、合成事件
我们知道，鼠标移入和鼠标移出这2个事件往往都是同时使用的，因此我们必须分别对“鼠标移入”和“鼠标移出”这2个事件分别定义。但是在jQuery中，我们可以使用hover()方法一次性地定义这2个事件，这就是所谓的合成事件。
$().hover(fn1,fn2)
参数fn1表示“鼠标移入”时触发的事件处理函数，参数fn2表示“鼠标移出”时触发的事件处理函数。
示例：
<script type="text/javascript">
$(function () {
$("h3").hover(function () {
$("#content").css("display","block");
}, function () {
$("#content").css("display", "none");
});
})
</script>
常用格式：
$("#wrapper").hover(function () {
//第1个function的内容
}, function () {
//第2个function的内容
})
还有一个合成事件是toggle()。
toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个。
toggle() 的另一个作用: 切换元素的可见状态。
3、事件参数
有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息：
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
4、取消绑定
一个已被绑定的事件可以解除绑定，通过off('click', function)实现：
function hello() {
alert('hello!');
}
a.click(hello); // 为hello函数绑定点击事件
// 10秒钟后解除绑定:
setTimeout(function () {
a.off('click', hello);//解除hello函数的绑定事件
}, 10000);
需要特别注意
的是，下面这种写法是无效的：
// 绑定事件:
a.click(function () {
alert('hello!');
});
// 解除绑定:
a.off('click', function () {
alert('hello!');
});这是因为两个匿名函数虽然长得一模一样，但是它们是两个不同的函数对象，off('click', function () {...})无法移除已绑定的第一个匿名函数。
为了实现移除效果，可以使用off('click')一次性移除已绑定的click事件的所有处理函数。
同理，无参数调用off()一次性移除已绑定的所有类型的事件处理函数。
5、事件触发条件
事件的触发总是由用户操作引发的。例如，我们监控文本框的内容改动：
var input = $('#test-input');
input.change(function () {
console.log('changed...');
});
当用户在文本框中输入时，就会触发change事件。但是，如果用JavaScript代码去改动文本框的值，将不会触发change事件：
var input = $('#test-input');
input.val('change it!'); // 无法触发change事件
有些时候，我们希望用代码触发change事件，可以直接调用无参数的change()方法来触发该事件：
var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件
input.change()相当于input.trigger('change')，它是trigger()方法的简写。
6、一次性事件
在jQuery中，我们可以使用one()方法为所选元素绑定一个“只触发一次”的处理函数。
语法：
$().one(type , fn)
说明：type表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。这里的type是一个字符串。fn表示事件的处理函数。
<script type="text/javascript">
$(function () {
$("#btn").one("click", function () {
alert("只能弹出一次！");
});
})
</script>
这里我们使用one()方法为按钮绑定了一个“只触发一次”的click事件。当我们第一次点击按钮之后会弹出对话框，但是第二次点击按钮就不会有任何反应。这就是one()方法的特点。