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 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
微信小程序模板(template)使用详解
Jan 31 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
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
swfupload 多文件上传实现代码
2008/08/27 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python实现学生管理系统
2018/01/11 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
Python BS4库的安装与使用详解
2018/08/08 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
python求解汉诺塔游戏
2020/07/09 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
给海归自荐信的建议
2013/12/13 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
《日月潭》教学反思
2014/02/28 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
通讯稿范文
2015/07/22 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python