Jquery基础之事件操作详解

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作。常见的元素点击事件、鼠标事件、键盘输入事件等，较传Javascript

相比JQuery增加并扩展了基本的事件处理机制，极大的增强了事件处理的能力。

一、DOM加载事件

页面加载完毕后浏览器会通过javascript为Dom元素加载事件，使用Javascript时候使用的是window.onload方法，而Jquery使用的是$(document).ready()方法,下表

展示两个事件的异同。

二、事件处理

当文件加载完成后就可以为元素添加事件处理，进而事件执行某些动作完成相关操作。jquery中有多种事件处理方法，主要有bind()、one()、unbind()、live()、trigger()、triggerHander()等。Jquery方法使用bind()方法为匹配的元素进行特定的事件绑定。bind()方法格式如下：

bind(type,[ data],fun);

bind()方法有三个参数，各个参数说明如下：

第一个参数是事件类型，主要如下：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。也可以是自定义名称，Jquery中的事件绑定类型比javascript少了"on",因此jquery中事件click对应javascript中的onclick函数。

第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象。

第三个参数是用来绑定的处理函数。

为按钮绑定单击事件示例：

<input type="button" id="btn1" value="单击">

$("#btn1").bind("click",function(){alert("单击事件绑定");});

bind()方法为元素绑定的事件一直有效直到unbind()方法或者删除元素。如果想要绑定事件只能执行一次就要使用one()方法绑定事件。one()同bind()方法一样，区别在于one()方法绑定的事件只能执行一次。

为按钮绑定一次性事件示例：

<input type="button" id="btn1" value="单击">

$("#btn1").one("click",function(){alert("单击事件绑定");});

unbind()方法为元素取消事件绑定，unbind()方法的格式如下：

$(selctor).unbind([type],[data])

unbind()方法是元素bind()方法的反向操作，从每个匹配的元素中删除绑定的事件。当没有参数时候删除所有的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。如果指定了事件类型，第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件。

示例：

<input type="button" id="btn1" value="click" />

<input type="button" id="btn2" value="removeBind" />

$("#btn1").bind("click", fun1 = function () { alert("事件1"); });

$("#btn1").bind("click", fun2 = function () { alert("事件2"); });

$("#btn2").bind("click", function () {
$("#btn1").unbind("click", fun2);
});

该示例使用unbind()方法的二个参数形式移除第二次绑定的事件处理函数。

live()方法为元素动态绑定事件，使用该方法绑定事件后，新加对应元素也能触发相应事件。live()方法格式如下：

$(selector).live([type],[data],fun);

live动态绑定示例：

$("p").live("click",function(){$(this).hide();});

该示例为所有的p元素节点动态添加了click事件，无论是现有的p元素节点还是以后要添加的p元素节点都有会中点单击时候触发hide()从而隐藏自己。die()方法是live()方法的反向操作，结果live()方法动态绑定的事件和unbind()方法一样。使用die()方法取法动态绑定后，所有动态绑定的事件将删除。

trigger()方法在匹配的元素上触发参数中的事件，该方法会触发浏览器默认事件，返回false阻止浏览器默认事件。trigger()方法格式如下:

$(selector).trigger([type],[data]);

trigger()方法示例：

$("form:first").trigger("submit");

该示例触发第一个from表单的submit操作。

triggerHandler()方法这个方法会触发绑定事件，但是不会触发浏览器默认事件。与trigger()方法触发后返回false效果一样。使用方法和trigger一样。

三、事件

事件处理中已经列出了主要的事件类型如下：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。各个事件类型主要是两种用法绑定事件、触发事件。以click事件为例，click方法格式如下：绑定事件$(selector).click(functiron(){//函数体})，触发事件$(selector).click()。例：

<input type="button" id="btn1" value="绑定事件"/>

<input type="button" id="btn2" value="触发事件"/>

$("#btn1").click(function(){alert("事件绑定");});

$("#btn2").click(function(){$("#btn1").click();})

该示例为第一个按钮btn1绑定事件，为按钮btn2绑定事件同时在绑定事件中触发第一个按钮的绑定事件。其余事件类型和click类似。

四、合成事件

合成事件也可以称为交互事件是JQuery自定义的方法，方法有两个hover()和toggle()。

hover()方法模仿鼠标悬停事件，方法格式如下：hover(enter,leave)。例：

$("ul li").hover(function(){alert("Enter");},functiron(){alert("leave");});

该示例为ul的li元素绑定悬停事件，当鼠标停上ul的子元素li上时候会触发enter()函数，打印“Enter”,当鼠标移出li元素时候会打印"leave"。

toggle()方法切换操作循环执行绑定的函数，方法格式如下：toggle(fun1,fun2,...,funN);例:

<input type="button" id="btn1" value="触发切换操作"/>

$("#btn1").toggle(function(){alert("开始");},function(){alert("继续");},function(){alert("结束");});

该示例为按钮btn1绑定切换事件每次单击都会顺序触发绑定事件中的一个。该示例第一次点击打印"开始"，第二次点击打印"继续",第三次点击打印"结束"，再次点击和第一次一样打印"开始"，循环顺序执行函数。

五、事件属性

Jquery对事件属性进行了封装使事件处理在各浏览器下不需要判别类型都能正常运行。各个事件属性的如下：

事件类型event.type.该属性用于获得触发该事件的类型，对不引发事件的不同操作返回不同的结果;例：

$("p").click(function(event){alert(event.type);});

该示例返回元素p单击事件的事件类型，结果打印是 "click";

事件类型event.target该属性用于获得触发事件的元素;例：

$("a").click(function(event){alert(event.target.href);});

该示例返回元素a的href属性。

事件默认行为event.preventDefault;该属性用于阻止事件的默认属性，例：

$("a").click(function(event){event.preventDefault;});

使用该属性阻止元素