基础事件(一)
JavaScript有一个非常重要的功能，就是事件驱动。当页面完全加载后，用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。jQuery为开发者更有效率的编写事件行为， 封装了大量有益的事件方法供我们使用。
绑定事件
在JavaScript课程的学习中，我们掌握了很多使用的事件，常用的事件有：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、 select、submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。那么，还有更多的事件可以参考手册中的事件部分。
jQuery通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type, [data], fn)，type表示一个或多个类型的事件名字符串；[data]是可选的，作为event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn表示绑定到指定元素的处理函数。
有html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础事件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <input type="button" value="按钮" /> <div></div> </body> </html>
使用点击事件：
$("input").bind("click", function() { //点击按钮后执行匿名函数
alert("弹窗！");
});
普通处理函数：
$("input").bind("click", fn); //执行普通函数式无须圆括号
function fn() {
alert("处理函数！");
}
可以同时绑定多个函数：
$("input").bind("click mouseover", function() { //点击和鼠标移入按钮分别执行一次
alert("弹窗！");
});
$("input").bind("mouseover mouseout", function() { //鼠标移入和移出按钮分别执行一次
$("div").html(function(index, value) {
return value + "1";
});
});
通过对象键值对绑定多个参数：
$("input").bind({
"mouseover":function() { //事件名的引号可以省略
alert("移入");
},
"mouseout":function() {
alert("移出");
}
});
事件名的引号可以省略，即：
$("input").bind({ //传递一个对象
mouseover:function() {
alert("移入");
},
mouseout:function() {
alert("移出");
}
});
对于以下jQuery代码：
$("input").bind("click mouseover", function() {
alert("弹窗！");
});
使用unbind删除绑定的事件：
$("input").unbind(); //删除全部事件
使用unbind参数删除指定类型事件：
$("input").unbind("click"); //只删除点击事件
又对于以下jQuery代码：
$("input").bind("click", fn1);
$("input").bind("click", fn2);
function fn1() {
alert("fn1");
}
function fn2() {
alert("fn2");
}
使用unbind参数删除指定处理函数的事件：
$("input").unbind("click", fn2); //删除了click事件绑定了fn2的
简写事件(一)
为了使开发者更加方便的绑定事件，jQuery封装了常用的事件以便节约更多的代码，我们称它为简写事件。
简写事件绑定方法
| 方法名 | 触发事件 | 描述 |
| click(fn) | 鼠标 | 触发每一个匹配元素的click(单击)事件 |
| dbclick(fn) | 鼠标 | 触发每一个匹配元素的dbclick(双击)事件 |
| 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(表单提交)事件 |
html代码不变，jQuery代码如下：
$("input").click(function() {
alert("单击！");
});
$("input").dblclick(function() {
alert("双击！");
});
$("input").mousedown(function() {
alert("鼠标左键按下!");
});
$("input").mouseup(function() {
alert("鼠标左键按下弹起!");
});
$(window).unload(function() { //一般unload卸载页面，新版浏览器应该是不支持的，火狐要设置一个权限(?) alert("1"); //一般用于清理工作 });
$(window).resize(function() { alert("文档改变了"); });
html代码若为：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础事件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <input type="button" value="按钮" /> <div></div> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </body> </html>
现在，再测试scroll事件：
$(window).scroll(function() { alert("滚动条改变了"); });
若html(部分)代码若为：
<input type="text" value="按钮" />
现在，再测试select事件：
$("input").select(function() {
alert("文本选定！");
});
再来测试change事件：
$("input").change(function() {
alert("文本改变！");
});
若html代码为：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础事件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form> <input type="submit" value="按钮" /> </form> </body> </html>
测试submit事件：
$("form").submit(function() {
alert("表单提交！");
});
