jQuery的事件处理

一、页面加载响应事件

$（document）.ready（）方法，获取文档就绪的时候。他极大地提高了Web相应速度。虽然该方法可以代替传统的window.onload（）方法，但是两者之间仍然有差别。

（1）在页面中可以无限制次数的使用$（document）.ready（）方法，各个方法之间不会冲突，会按照代码的顺序依次执行。但是一个页面中只能有一个window.onload（）方法。

（2）在一个文档完全下载到浏览器时（包括有关联的文件、图片等），就会相应window.onload（）方法。而$（document）.ready（）方法是在所有的DOM元素完全就绪后才可以使用，不包括关联的文件。比如，页面上还有图片没有加载完成，但是DOM元素已经准备就绪，$（document）.ready（）方法就能执行，在相同条件下，window.onload（）方法是不会执行的，他会等待图片加载，直到图片都下载完毕后才会执行。所以，$（document）.ready（）方法优于window.onload（）方法。

二、jQuery中的事件

以下fn为处理函数，可以有，也可以没有。

【blur（fn）】：失去焦点事件。元素失去焦点时触发。

【change（fn）】：在元素值改变并失去焦点时触发。

【focus（fn）】：元素获得焦点时触发。

【mousemove（fn）】：鼠标在元素移动时触发。

【mouseout（fn）】：鼠标从元素上离开时触发。

【mouseover（fn）】：鼠标移入对象时触发。

【mouseup（fn）】：鼠标单击对象释放时触发。

例题：横向导航菜单栏，使用的就是mouseover与mouseout事件，js核心代码块如下：

// 通过mouserover事件让其他子菜单隐藏，并且显示本菜单。
$(document).ready(function(){
    // 先通过类选择器找到大的div
    $(".menubar").mouseover(function(){
        // 在该div下面找到小的菜单，也就是.menu
        $(this).find(".menu").show();
    });
    $(".menubar").mouseout(function(){
        $(this).find(".menu").hide();
    });
})

在样式表中，首先将.menu类的设置为隐藏，也就是  .menu{display:none}

三、事件绑定

在页面加载完毕时，通过为元素绑定事件完成相应的操作。

1、绑定事件——bind(type,[data],fn)

type为事件类型，比如点击、鼠标移入等；data是可选项，作为event.data属性值传递给时间对象的额外数据对象，多数情况下不使用；fn为绑定的事件处理程序。

例题：单击按钮，弹出提示对话框，就是利用绑定事件实现。js核心代码如下，注意事件type是“click”，而不是“onclick”。

$(document).ready(function(){
    $("input:button").bind("click",function(){alert("您点击了按钮。")});
})

例题：通过在下拉框中选择选项，实现换肤的功能，就是利用事件绑定实现的。

2、移除绑定——unbind([type],[data])

3、绑定一次性事件处理——one(type,[data],fn)

四、模拟用户操作

1、模拟用户的操作触发事件

2、模仿悬停事件

3、模拟鼠标连续点击事件