Jquery基础之事件操作详解(2)

该示例为所有的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" value="绑定事件"/> <input type="button" 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" 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".

六、事件冒泡

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzsxxz.html