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;});

使用该属性阻止元素a的默认的跳转行为，结果和return false一样。

事件冒泡event.stropPropagation属性用于阻止事件冒泡，例：

$("div").click(function(event){alert("里层点击");event.stopPropagation;});

该示例中使用stopPropagation属性阻止div的父元素的click事件被触发。

event.pageX和event.pageY属性，使用这两个属性可以获得鼠标的相对于页面的当前位置。例：

$("p").click(function(event){alert("current mouse location "+event.pageX+" "+event.pageY);});

该示例当点击元素p的时候获得鼠标的当前位置，并打印出来。

event.witch属性，使用这个属性可以获得鼠标单击时候鼠标的左中右键，在键盘事件中获得键值。

$("p").mousedown(function(event){alert(event.witch);});

该示例当鼠标按下时候打印鼠标键值。左中右健分别对应值是1、2、3。

event.metaKey属性用于在事件获得键盘的ctrl键，例：

$("body").keydown(function(event){if(event.metaKey){alert("ctrl");}else{alert("no ctrl");}});

该示例当在页面中按下键盘时候如果按键为ctrl键就打印ctrl，否则打印"no ctrl".

六、事件冒泡

页面中有多个绑定事件因此可能出现多个元素响应同一个事件，由此引发了事件不是我们预期的，这种现象就是事件冒泡，要处理这个问题可以对事件的作用范围进行限制，Jquery中使得stopPropagation()方法停止事件的冒泡。事件冒泡示例：

<body><div><span>事件冒泡</span>div内容</div>body内容</body>

$("body").click(function(){alert("body");});

$("body div").click(function(){alert("div");});

$("span").click(function(){alert("span");});

在该示例中当点击span时候会触发三个打印事件 "span" "div" "body"，如何阻止事件冒泡？可以使用Jquery事件中的stropPropagation()方法来停止事件冒泡。上面示例改成这样：

$("body").click(function(event){alert("body");event.stopPropagation();});

$("body div").click(function(event){alert("div");event.stopPropagation();});

$("span").click(function(event){alert("span");event.stopPropagation();});

这样当点击不同元素时候就不会发生冒泡事件。

七、事件命名空间

事件添加命名空间便于事件的管理:删除事件和触发事件。例：

<div>元素绑定多个事件</div>

$("div").bind("click.plugin",function(){alert("click.plugin");});

$("div").bind("click",function(){alert("click");});

$("div").bind("mouseover.plugin",function(){alert("mouseover.plugin");});

$("div").bind("dbclick",function(){alert("dbclick");});

由于使用了命名空间可以删除指定命名空间中的事件，如移除所有plugin命名空间下的事件函数方法如下:$("button").click(function(){$("div").unbind(".plugin");});这样就移除了所有命名空间是plugin的事件函数。div中只剩下click和dbclick绑定事件。

使用命名空间对触发特定的事件了带来了方便，如为div绑定了两个click事件，一个是带命名空间的一个是不带命名空间。如果想要触发不包含在命名空间中的事件可以使用trigger("click!")方法，！感叹号的作用是匹配所有不包含在命名空间中的click方法。

以上这篇Jquery基础之事件操作详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。