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两段代码,两个小技巧
Feb 04 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 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
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
PHP时间处理类操作示例
2018/09/05 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python发展史及网络爬虫
2019/06/19 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
2014年新生军训方案
2014/05/01 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
写景作文评语集锦
2014/12/25 职场文书
学校社团活动总结
2015/05/07 职场文书
高质量“欢迎词”
2019/04/03 职场文书