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 mobile实现拨打电话功能的几种方法
Aug 05 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 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
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
深入理解Python变量与常量
2016/06/02 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Python 在局部变量域中执行代码
2020/08/07 Python
Python如何测试stdout输出
2020/08/10 Python
Python日志器使用方法及原理解析
2020/09/27 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
科研课题实施方案
2014/03/18 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
烟台的海导游词
2015/02/02 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android