第1章 WEB前端开发工程师-jQuery框架 1-17：jQuery简写事件

                                                        jQuery简写事件

 

本节课所讲内容：

1. jQuery简写事件

                                                                            主讲教师：Head老师

一．jQuery简写事件

为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。我

们称它为简写事件。内部插入节点方法.

 

方法名	描述
click(fn)	触发每一个匹配元素的 click(单击)事件
dblclick(fn)	触发每一个匹配元素的 dblclick(双击)事件
mousedown(fn)	触发每一个匹配元素的 mousedown(点击后)事件
mouseup(fn)	触发每一个匹配元素的 mouseup(点击弹起)事件
mouseover(fn)	触发每一个匹配元素的 mouseover(鼠标移入)事件
mouseout(fn)	触发每一个匹配元素的 mouseout(鼠标移出)事件
mousemove(fn)	触发每一个匹配元素的mousemove(鼠标移动)事件
mouseenter(fn)	触发每一个匹配元素的 mouseenter(鼠标穿过)事件
mouseleave(fn)	触发每一个匹配元素的 mouseleave(鼠标穿出)事件
keydown(fn)	触发每一个匹配元素的 keydown(键盘按下)事件
keyup(fn)	触发每一个匹配元素的 keyup(键盘按下弹起)事件
keypress(fn)	触发每一个匹配元素的 keypress(键盘按下)事件
unload(fn)	当卸载本页面时绑定一个要执行的函数
resize(fn)	触发每一个匹配元素的 resize(文档改变大小)事件
scroll(fn)	触发每一个匹配元素的 scroll(滚动条拖动)事件
focus(fn)	触发每一个匹配元素的 focus(焦点激活)事件
blur(fn)	触发每一个匹配元素的 blur(焦点丢失)事件
focusin(fn)	触发每一个匹配元素的 focusin(焦点激活)事件
focusout(fn)	触发每一个匹配元素的 focusout(焦点丢失)事件
select(fn)	触发每一个匹配元素的 select(文本选定)事件
change(fn)	触发每一个匹配元素的 change(值改变)事件
submit(fn)	触发每一个匹配元素的 submit(表单提交)事件

注意：这里封装的大部分方法都比较好理解，我们没必要一一演示确认，重点看几个需

要注意区分的简写方法。

.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外

一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有

什么区别呢？手册上的说明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发，

而.mouseover()和.mouseout()则会触发。

//HTML 页面设置

<div style="width:200px;height:200px;background:green;">

<p style="width:100px;height:100px;background:red;"></p>

</div>

<strong></strong>

//mouseover 移入

$('div').mouseover(function () { //移入 div 会触发，移入 p 再触发

$('strong').html(function (index, value) {

return value+'1';

});

});

//mouseenter 穿过

$('div').mouseenter(function () { //穿过 div 或者 p

$('strong').html(function (index, value) { //在这个区域只触发一次

return value+'1';

});

});

//mouseout 移出

$('div').mouseout(function () { //移出 p 会触发，移出 div 再触发

$('strong').html(function (index, value) {

return value+'1';

});

});

//mouseleave 穿出

$('div').mouseleave(function () { //移出整个 div 区域触发一次

$('strong').html(function (index, value) {

return value+'1';

});

});

.keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。

$('input').keydown(function (e) {

alert(e.keyCode); //按下 a 返回 65

});

$('input').keypress(function (e) {

alert(e.charCode); //按下 a 返回 97

});

注意：e.keyCode 和 e.charCode 在两种事件互换也会产生不同的效果，除了字符还有一

些非字符键的区别。

charCode 返回onkeypress事件触发键值的字母代码。

 keyCode 返回 onkeydown 或 onkeyup 事件的键的代码。

.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()

和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。

//HTML 部分

<div style="width:200px;height:200px;background:red;">

<input type="text" value="" />

</div>

<strong></strong>

//focus 光标激活

$('input').focus(function () { //当前元素触发

$('strong').html('123');

});

//focusin 光标激活

$('div').focusin(function () { //绑定的是 div 元素，子类 input 触发

$('strong').html('123');

});

注意：.blur()和.focusout()表示光标丢失，和激活类似，一个必须当前元素触发，一个可

以是子元素触发。