基础事件
1.绑定事件
jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type, [data], fn)，type 表示一个或多个类型的事件名字符串；[data]是可选的，作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指定元素的处理函数。
使用点击事件
$('input').bind('click', function () { //点击按钮后执行匿名函数
alert('点击！');
});
普通处理函数
$('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 处理函数的事件
2.简写事件
| 方法名 | 触发条件 | 描述 |
|---|---|---|
| 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(表单提交)事件 |
3.复合事件
| 方法名 | 描述 |
|---|---|
| ready(fn) | 当 DOM 加载完毕触发事件 |
| hover([fn1,]fn2) | 当鼠标移入触发第一个 fn1，移出触发 fn2 |
上一篇: jQuery的表单选择器篇
