jQuery中值得注意的trigger方法浅析

2024-09-28 23:54:27

介绍

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上绑定的事件，并且取消浏览器对这个事件的默认操作，不会得到焦点。

总结

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

jquery滚动条插件（可以自定义）

以后用起来就方便了把 css文件引入 <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"> js引入 <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script&
基于jQuery实现的查看全文功能【实用】

话不多说,请看具体实例自己引用jQuery.js版本查看全文---收起(文本内容少于四行,不显示查看全文---收起,超过五行时才显示出来并有此功能) <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery1.7.2.min.js"></s
基于jquery实现的鼠标悬停提示案例

//这是JS里的代码MOMO.js 因为刚学封装JQUERY插件所以就做的稍微麻烦一点,其实在前台页面直接就可以用mouseover,mouseout,mousemove三个事件就行了 (function ($) { $.fn.extend({ "titleOver": function (e) { this[0].myTitle = this[0].title; this[0].title = ""; //创建div元素 var tooltip = "
简单实现jquery焦点图

本文实例为大家分享了jquery焦点图的实现代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点图</title> <style type="text/css"> img{position: relative;} ul{list-style:
jQuery学习笔记之入门

最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下: 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: $('#info').val('Hello World!'); 嗯,可以看
jquery实现简单的瀑布流布局

是开头都会说的原理瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流从布局的角度来说,就是4个li标签.通过一定的事件(比如滚动条滚动多少px),然后读取之,再把数据动态地添加到页面中. 添加数据原则,不是根据li索引值来加,而是根据各列中高度最短的的那列动态添加.否则可能导致页面很难看(左右高度不统一). 实例涉及ajax方法.可在服务器环境下运行. 废话不多说了.直接上样式. <ul id=&qu
jQuery内存泄露解决办法

本文大家分享了jQuery内存泄露解决办法,供大家参考,具体内容如下思路:为JQuery扩展删除jquery元素对象的方法,大大减轻内存泄露的压力 ;(function($){ if(!$.lui.widget) $.lui.widget = {}; //$.lui.newGuid()生成随机32位id //如果采用此方式多次生成jquery对象的话,html代码字符串会在内存中多次重复,占用额外的内容,也会有泄露.而$("<span></span>").at
浅析Jquery操作select

话不多说,请看代码: <select id="Select1"> <option value="one">一</option> <option value="two">二</option> <option value="thr">三</option> <option value="tho">四</optio
jQuery 获取select选中值及清除选中状态

不会使用jQuery的后台真心伤不起,获取select下拉列表的值都让我搞了好一阵,然而并没有结束,恢复选中状态也是花了我半个小时. 这里先记一下省的以后会忘了. 获取jQuery中select下拉列表中的lang属性值: <span style="font-size:14px;"> var provinceSearch = $("#loc_province_search").find("option:selected").attr(
jQuery实现金额录入框

前端开发过程中,通常会用到数值录入框,比如要求输入金额,禁止录入非数值字符,也禁止粘贴非数值字符,怎么实现呢? 首先通过(function($){ })(jQuery); 即时执行函数用于模块隔离,可以避免与其他功能模块.插件之间产生变量污染问题,所有私有的全局变量可以放在即时执行函数的头部. 然后在jquery原型上扩展numbox方法,直接上代码 (function ($) { // 数值输入框 $.fn.numbox = function (options) { var type = (
jQuery实现字符串全部替换的方法

本文实例讲述了jQuery实现字符串全部替换的方法.分享给大家供大家参考,具体如下: 与C# String类型的Replace方法不同,jQuery的Replace仅能替换第一个匹配的内容. 例如: var str = "a<br/>b<br/>c<br/>"; var Newstr = str.Replace("<br/>", ""); alert(Newstr); //内容为:ab<br/
jQuery中animate的几种用法与注意事项

一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;

jQuery中值得注意的trigger方法浅析

相关推荐

随机推荐