jQuery技术

JQuery之事件(2)

字号+ 作者:H5之家 来源:H5之家 2017-09-05 17:14 我要评论( )

当一个元素,或者其内部任何一个元素获得焦点的时候,例如:input元素,用户在点击聚焦的时候,如果开发者需要捕获这个动作的时候,jQuery提供了一个focusin事件使用上非常简单:方法一:$ele.focusin()绑定$ele元

当一个元素,或者其内部任何一个元素获得焦点的时候,例如:input元素,用户在点击聚焦的时候,如果开发者需要捕获这个动作的时候,jQuery提供了一个focusin事件使用上非常简单:方法一:$ele.focusin()绑定$ele元素,不带任何参数一般是用来指定触发一个事件,一般用的比较少点击触发
$("ele").focusin(function(){
alert('触发指定事件')
})
$("#test").mouseup(function(){
$("ele").focusin()//指定触发事件
});
方法二:$ele.focusin( handler )绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数这样可以针对事件的反馈做很多操作了点击触发
$("#test").focusin(function() {
//this指向 div元素
});
方法三:$ele.focusin( [eventData ], handler )使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题



点击触发
$("#test").focusin(11111,function(e) {
//this指向 div元素
//e.data=> 11111 传递数据
});8、JQuery鼠标事件之focusout事件


当一个元素,或者其内部任何一个元素失去焦点的时候,比如input元素,用户在点击失去焦的时候,如果开发者需要捕获这个动作,jQuery提供了一个focusout事件使用上非常简单:方法一:$ele.focusout()绑定$ele元素,不带任何参数一般是用来指定触发一个事件,可能一般用的比较少点击触发
$("ele").focusout(function(){
alert('触发指定事件')
})
$("#test").mouseup(function(){
$("ele").focusout()//指定触发事件
});
方法二:$ele.focusout( handler )绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数这样可以针对事件的反馈做很多操作了点击触发
$("#test").focusout(function() {
//this指向 div元素
});
方法三:$ele.focusout( [eventData ], handler )使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题点击触发
$("#test").focusout(11111,function(e) {
//this指向 div元素
//e.data=> 11111 传递数据
});
9、JQuery表单事件之focus和blur事件


与8之间的本质区别:是否支持冒泡处理
举个简单的例子
其中input元素可以触发focus()事件div是input的父元素,当它包含的元素input触发了focus事件时,它就产生了focusin()事件。focus()在元素本身产生,focusin()在元素包含的元素中产生
blur与focusout也亦是如此.focusout与blur
点击触发失去焦点(无反应):



点击触发失去焦点并冒泡:

17、JQuery事件的属性和方法


事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别event.type:获取事件的类型触发元素的事件类型$("a").click(function(event) {
alert(event.type); // "click"事件
});
event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标通过这2个属性,可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(左边)与 (顶边)的距离,简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化event.preventDefault() 方法:阻止默认行为这个用的特别多,在执行这个方法后,如果点击一个链接(a标签),浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了event.stopPropagation() 方法:阻止事件冒泡事件是可以冒泡的,为防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数event.which:获取在鼠标单击时,单击的是鼠标的哪个键event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents),左键报告1,中间键报告2,右键报告3event.currentTarget : 在事件冒泡过程中的当前DOM元素冒泡前的当前触发事件的DOM对象, 等同于this.this和event.target的区别:js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;.this和event.target都是dom对象如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用;

18、JQuery事件之trigger事件


在jQuery通过on方法绑定一个原生事件$('#elem').on('click', function() {
alert("触发系统事件")
});
alert需要执行的条件:必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢? 正常来说是不可以的,但是jQuery解决了这个问题,提供了一个trigger方法来触发浏览器事件所以我们可以这样:$('#elem').trigger('click');
在绑定on的事件元素上,通过trigger方法就可以调用到alert了,挺简单!再来看看.trigger是什么?简单来讲就是:根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
trigger除了能够触发浏览器事件,同时还支持自定义事件,并且自定义时间还支持传递参数$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
});
$('#elem').trigger('Aaron',['参数1','参数2'])
trigger触发浏览器事件与自定义事件区别?自定义事件对象,是jQuery模拟原生实现的
自定义事件可以传递参数


19、JQuery事件之自定义事件triggerhandler()事件


trigger事件还有一个特性:会在DOM树上冒泡,所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡trigger事件是具有触发原生与自定义能力的,但是存在一个不可避免的问题: 事件对象event无法完美的实现,毕竟一个是浏览器给的,一个是自己模拟的。尽管 .trigger() 模拟事件对象,但是它并没有完美的复制自然发生的事件,若要触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件,使用.triggerHandler() 来代替triggerHandler与trigger的用法是一样的,重点看不同之处:triggerHandler不会触发浏览器的默认行为,.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 《jQuery与jQuery Mobile开发完全技术宝典》(朱育发)【摘要 书评

    《jQuery与jQuery Mobile开发完全技术宝典》(朱育发)【摘要 书评

    2017-09-05 11:03

  • 使用jQuery动态加载js脚本文件的方法

    使用jQuery动态加载js脚本文件的方法

    2017-09-05 10:04

  • jQuery学习笔记8

    jQuery学习笔记8

    2017-09-04 12:08

  • 用JQuery实现ajax技术的常用方法

    用JQuery实现ajax技术的常用方法

    2017-09-04 11:00

网友点评