jQuery中trigger()与bind()用法分析


Posted in Javascript onDecember 18, 2015

本文实例讲述了jQuery中 trigger()与bind()用法。分享给大家供大家参考,具体如下:

trigger(type)

在每一个匹配的元素上触发某类事件。

返回值:jQuery

参数:

type (String): 要触发的事件类型

示例:

$("p").trigger("click")

1.trigger() 触发事件

这个方法是jQuery 1.3中新增的一个引起触发事件的函数。
这里的事件就如jQuery的帮助文档中的事件那一栏,如:click, mouseover, keydown 等有动作的js事件,而像show, hide这是效果不是事件。

2.为什么要用 trigger() ?

相信刚开始接触大家也都有这样的想法?

比如前台页面里有:<p id="p1">请点击这里!</p>
你希望加载页面时就执行这个事件给这个这p绑定了click事件(将下面的代码写在$(function(){});里面):

$("#p1").click(function(){
  alert("hello!");
});

如果用trigger(),你就要写成这样:

$("#p1").click(function(){
  alert("hello!");
}).trigger(click);

这样写不是更加麻烦了吗?可以这么说,但是用trigger()最大的好处就是它是可以传递参数进去的。例如:

//myEvent为自定义事件名
$("#p1").bind("myEvent",function(event,str1,str2) {
  alert(str1 + ' ' + str2); 
});
$("#p1").trigger("myEvent",["Hello","World"]);

也可以这样写:

$("#p1").bind("myEvent",function(event,str1,str2) {
  alert(str1 + ' ' + str2);
}).trigger("myEvent",["Hello","World"]);

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript中Eval函数的使用说明
Oct 11 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 #Javascript
js获取url传值的方法
Dec 18 #Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 #Javascript
jquery获取css的color值返回RGB的方法
Dec 18 #Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 #Javascript
jquery简单倒计时实现方法
Dec 18 #Javascript
js命名空间写法示例
Dec 18 #Javascript
You might like
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
PHP学习 运算符与运算符优先级
2008/06/15 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php使用GeoIP库实例
2014/06/27 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP 实现缩略图
2021/03/09 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
初学python数组的处理代码
2011/01/04 Python
使用python解析xml成对应的html示例分享
2014/04/02 Python
使用Python开发windows GUI程序入门实例
2014/10/23 Python
用python 制作图片转pdf工具
2015/01/30 Python
python概率计算器实例分析
2015/03/25 Python
Python的装饰器使用详解
2017/06/26 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
导游个人求职信范文
2014/03/23 职场文书
内科护士节演讲稿
2014/09/11 职场文书
保卫工作个人总结
2015/03/03 职场文书
小学庆六一主持词
2015/06/30 职场文书
回复函格式及范文
2015/07/14 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书