JQuery事件

[六点的傍晚]

Jquery页面载入事件
$(document).ready() 方法
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册的替代方法。通过使用这个方法，可以在DOM载
入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
注：可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）
先后顺序依次执行。
鼠标事件：
1．click单击事件
$(".box").click(function () {
alert("这是一个click单击事件被触发了") });
2．dblclick鼠标双击事件
$(".box").dblclick(function () {
alert("这是一个dblclick鼠标双击事件被触发了") });
3．mousedown 鼠标移动到某个元素上被按下的时候触发的事件
$(".box").mousedown(function () {
alert("这是一个mousedown鼠标被按下的时候触发"); });
4．mouseup当在元素上放松鼠标按钮时
$(".box").mouseup(function () {
alert("这是一个mouseup当在元素上放松鼠标按钮时触发的事件"); });
5．mouseenter事件
$(".box").mouseenter(function () {
console.log("mouseenter"); });
6．mouseleave事件
$(".box").mouseleave(function () {
console.log("mouseleave"); });
7．mouseover事件
$(".box").mouseover(function () {
console.log("mouseover"); });
8．mouseout
$(".box").mouseout(function () {
console.log("mouseout"); });
hover事件
hover([over,]out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，
它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，
会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，
会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，
则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
参数说明：
ver:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
表单事件：
1. focus() 事件
当元素获得焦点时，触发focus事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发
所有绑定的focus函数。
2. blur() 事件
当元素失去焦点时触发 blur 事件。这个函数会调用执行绑定到blur事件的所有函数，包括
浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素
失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的。
3. focusin() 事件
当元素获得焦点时，触发 focusin 事件。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
4. focusout() 事件
当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
5．change()事件
<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过
change事件去监听这些改变的动作。
input元素：监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选
按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
select元素：对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发。
textarea元素：多行文本输入框，当有改变时，失去焦点后触发change事件。
6．select()事件
当textarea或文本类型的input元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。
可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
7．submit()事件
提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。
同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作
（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，
监听下提交表单的这个动作使用上非常简单，与基本事件参数处理保持一致
这里需要特别注意：
form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
<form onsubmit="return false;"></form>，jQuery中可以直接在函数中最后结尾return false即可
键盘事件
1.鼠标有mousedown,mouseup之类的事件，这是根据人的手势动作分解的2个触发行为。
相对应的键盘也有这类事件，将用户行为分解成2个动作，键盘按下与松手，针对这样的2种动作，
jQuery分别提供了对应keydown与keyup方法来监听：
keydown()事件：当键盘或按钮被按下时，发生keydown事件。
keyup()事件：当按钮被松开时，发生keyup事件。它发生在当前获得焦点的元素上。
2.keypress()事件
在input元素上绑定keydown事件会有一个问题：
每次获取的内容都是之前输入的，当前输入的获取不到，
keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，
得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，
获得的是触发键盘事件后的文本
当浏览器捕获键盘输入时，还提供了一个keypress的响应，这个跟keydown是非常相似
keypress事件与keydown和keyup的主要区别
只能捕获单个字符，不能捕获组合键；无法响应系统功能键（如delete，backspace）
不区分小键盘和主键盘的数字字符；因此KeyPress主要用来接收字母、数字等ANSI字符，
而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。
咧如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
事件的绑定和解绑 on()的多事件绑定
之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，
所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过
一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。
基本用法：on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。
最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
最大的不同点就是on是可以自定义事件名，多个事件绑定同一个函数：
$("#elem").on("mouseover mouseout",function(){ });
通过空格分离，传递不同的事件名，可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}，
click:function(){}
});
通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法
卸载事件off()方法
通过.on()绑定的事件处理程序；通过off() 方法移除该绑定
根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，
选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，
只有与这些参数完全匹配的事件处理函数才会被移除
绑定2个事件：$("elem").on("mousedown mouseup",fn)
删除一个事件：$("elem").off("mousedown")
删除所有事件：$("elem").off("mousedown mouseup")
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁：
$("elem").off()*/
演示时取消注释：
$("#div2").off("mousedown");
$("#div3").off();