jQuery事件1

一、 页面载入事件（ready(fn)）
1、 页面载入事件是当DOM载入就绪，可以查询及操纵时绑定一个要执行的函数的事件。
2、 页面载入事件中所绑定的函数是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
3、 .ready()方法是一个对向window.load事件注册事件的替代方法。通过它，可以在DOM载入就绪且能够读取并操纵时立即调用我们所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
4、 我们可以在同一个页面中无限次地使用 $ (document).ready()事件；但window.load事件在同一个页面中只能有一个。其中注册的函数会按照代码中的先后顺序依次执行。
5、 $ (document).ready()的简写形式为$(function( $ ){});当我们使用简写时，内部的jQuery代码仍然可以使用 $ 作为别名。
6、 页面载入事件中的参数（fn）是要在DOM就绪时执行的函数。而在DOM加载完成时再运行的jQuery代码为 $ (document).ready(function(){});
二、jQuery鼠标事件
1、 jQuery常用鼠标事件有：
（1）鼠标单击（click）事件：click（[[data], fn]）；
（2）鼠标双击（dbclick）事件：dblclick([[data],fn])；
（3）鼠标按下（mousedown）事件：mousedown([[data], fn])；
（4）鼠标弹起（mouseup）事件：mouseup([[data], fn])；
（5）鼠标进入/移入（mouseenter或者mouseover）事件：mouseenter([[data], fn])或者mouseover([[data], fn])；
（6）鼠标离开/移出（mouseleave或者mouseout）事件：mouseleave([[data], fn]) 或者mouseout([[data], fn])。
2、其中参数fn是匹配元素的鼠标事件所绑定的处理函数。可传入参数data以便函数fn处理。
3、举例：假如在一个< div></ div>中包含有六个< button></ button>，则在< script></ script>中鼠标事件的代码为：
（1）第一个按钮的鼠标单击事件： $ (“button”).eq(0).click(function () {});
（2）第二个按钮的鼠标双击事件： $ (“button”).eq(1).dblclick(function () {});
（3）第三个按钮的鼠标按下事件： $ (“button”).eq(2).mousedown(function () {});
（4）第四个按钮的鼠标弹起事件： $ (“button”).eq(3).mouseup(function () {});
（5）第五个按钮的鼠标进入事件： $ (“button”).eq(4).mouseenter(function () {});
（6）第六个按钮的鼠标离开事件： $ (“button”).eq(5).mouseleave(function () {});
4鼠标的hover事件是一个模仿悬停事件，即鼠标移动到一个对象上面及移出这个对象的方法。
（1）.hover()方法是一个自定义方法。它为使用频繁的任务提供了一种“保持在其中”的状态。
（2）hover事件具有俩个指令：当鼠标移动到一个匹配的元素上面时，会执行指定的第一个函数（悬停状态）。当鼠标移出这个元素时，会执行指定的第二个函数（移出事件）。
（3）hover事件可以检测到鼠标是否仍然处在特定元素中。例如是否处在div中的图像。如果是，则会继续保持“悬停”状态，而不会触发移出事件；如果不是，则会执行移出事件。它修正了使用mouseout事件的一个常见错误。
（4）hover事件的表达式是：hover([over,]out)。其中方括号内的参数（over）是鼠标移到元素上要触发的函数；方括号外的参数（out）是鼠标移出元素要触发的函数。小括号内的参数是当鼠标移到元素上或移出元素时触发执行的事件函数。
（5）hover事件的jQuery代码为 $ (“.class”).hover(function(){//hover的第一个函数：鼠标移入时的触发事件},function(){//hover的第二个函数：鼠标移出时的触发事件});
5、鼠标检测焦点（光标）事件和表单检测焦点事件的区别：
（1）鼠标获取焦点 (focusin)事件 与 失去焦点 (focusout)事件都是通过（选择）父元素来检测子元素的焦点情况的（在父元素上响应）；
（2）表单获取焦点 (focus)事件 与 失去焦点 (blur)事件是通过子元素来检测本身的焦点情况的。eg:
< div id=”date”>
< input type=”text” id=”textdate” />
< input type=”text” id=”textdate”/>
</ div>
< script>
//在父元素（div）上检测子元素（input）的焦点情况
$(“# date”).focusin(function () {
$(“# date”).addClass(“changeColor”);
});
$(“# date”).focusout(function () {
$(“# date”).removeClass(“changeColor”);
});
//看上面代码的效果图需注释下面的代码，反之，亦然
//在子元素（input）上检测本身的焦点情况
$(“# textdate”).focus(function () { $(“# textdate”).addClass(“setBorder”);
});
$(“# textdate”).blur(function () {
$(“# textdate”).removeClass(“setBorder”);
});
</ script>
左图为鼠标获取焦点 (focusin)事件的效果图，右图为表单获取焦点 (focus)事件的效果图：