JQ8 基础事件
绑定事件
jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type, [data], fn)，type 表示一个或多个类型的事件名字符串；[data]是可选的，作为event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指定元素的处理函数。
$('input').bind('click', function () {//点击按钮后执行匿名函数
alert('弹窗！');
});
$('input').bind('click', 123, function (e) {//[data]额外的数据为数字
alert(e.data);
});
$('input').bind('click', 'abc', function (e) {//[data]额外的数据为字符串
alert(e.data);
});
$('input').bind('click', [1,2,3,'a','b'], function (e) {//[data]额外的数据为数组
alert(e.data[3]);
});
$('input').bind('click', {user : 'Li', age : 100}, function (e) {//[data]额外的数据为对象
alert(e.data.age);
});
$('input').bind('click', fn);//执行普通函数式无须圆括号
function fn() {
alert('处理函数！')
}
//同时绑定多个事件
$('input').bind('mouseout mouseover', function () { //移入和移出分别执行一次
$('div').html(function (index, value) {
return value + '1';
});
});
//通过对象键值对绑定多个参数
$('input').bind({ //传递一个对象
'mouseout' : function () { //事件名的引号可以省略
alert('移出');
},
'mouseover' : function () {
alert('移入');
}
});
//使用unbind 删除绑定的事件
$('input').unbind(); //删除所有当前元素的事件
//使用unbind 参数删除指定类型事件
$('input').unbind('click'); //删除当前元素的click 事件
//使用unbind 参数删除指定处理函数的事件
function fn1() {
alert('点击1');
}
function fn2() {
alert('点击2');
}
$('input').bind('click', fn1);
$('input').bind('click', fn2);
$('input').unbind('click', fn1); //只删除fn1 处理函数的事件
简写事件
| 方法名 | 触发条件 | 描述 |
| click(fn) | 鼠标 | 触发每一个匹配元素的click(单击)事件 |
| dblclick(fn) | 鼠标 | 触发每一个匹配元素的dblclick(双击)事件 |
| mousedown(fn) | 鼠标 | 触发每一个匹配元素的mousedown(点击后)事件 |
| mouseup(fn) | 鼠标 | 触发每一个匹配元素的mouseup(点击弹起)事件 |
| mouseover(fn) | 鼠标 | 触发每一个匹配元素的mouseover(鼠标移入)事件mouseout(fn) |
| 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(焦点激活)事件 |
| 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
});
//charCode 属性只有在发生keypress 事件才包含值，而且这个值是按下的那个键所代表字符的ASCII 编码
$('input').keypress(function (e) {
alert(e.charCode); //按下a 返回97
alert(String.fromCharCode(e.charCode));
});
PS：可以使用String.fromCharCode()将ASCII 编码转换成实际的字符。
.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。
<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()表示光标丢失，和激活类似，一个必须当前元素触发，一个可以是子元素触发。
