jQuery中值得注意的trigger方法浅析
编程学习 2021-07-04 19:19www.dzhlxh.cn编程入门
在前端页面开发中,我们有时候希望能自定执行一些人性化操作,比如鼠标不用点击自动就能点击等操作,利用传统的js语言需要编写复杂的代码才能实现此功能,这时候我们使用jquery的trigger()方法就能轻松实现。本文就给大家详细介绍了关于jQuery中值得注意的trigger方法。
介绍
trigger方法的功能是在所选择的元素上触发指定类型的事件,其调用的语法格式为:trigger(type,[data])
,其中参数type为触发事件的类型,参数data为可选项,表示在触发事件时,传递给函数的附件参数.
常用模拟
有时,不需要进行操作,也想模拟用户操作达到某些效果。比如在用户进入界面后就触发click事件,而不需要用户去点击。
在jquery中可以使用trigger完成。
$("#btn").trigger("click")//触发id为btn的click事件 $("#btn").click()//简写
触发自定义事件
trigger不仅能触发浏览器支持的这些事件,也可以触发自定义的事件。比如,绑定一个名为clickMe的事件:
$("#btn").bind("clickMe",function(){ //.... }) $("#btn").trigger("clickMe")//触发该事件
传递数据
trigger(type,[data])
第一个参数指触发的事件类型,第二个是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次的事件是否为用户触发的。
<button id="btn">按钮</button> <p id="msg"></p> <script> $(function(){ $('#btn').bind("clickMe",function(event,msg1,msg2){ $("#msg").text(msg1+' '+msg2) }) $('#btn').trigger("clickMe",["hello","jquery"]) }) </script>
效果截图
执行默认操作
trigger()
方法触发事件后,会执行浏览器默认操作。比如
$('input').trigger('focus')
以上代码不仅会触发为input绑定的focus事件,也会触发浏览器中默认的focus事件,得到焦点。如果只想触发自定义的focus事件,使用triggerHandler()
$('input').triggerHandler('focus')
该方法仅仅会触发input上绑定的事件,并且取消浏览器对这个事件的默认操作,不会得到焦点。
总结
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。