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 相关文章推荐
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
vue组件化中slot的基本使用方法
May 01 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
PHP输入流php://input介绍
2012/09/18 PHP
php生成静态页面的简单示例
2014/04/17 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
webpack入门必知必会
2017/01/16 Javascript
详解angular element()方法使用
2017/04/08 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
Django开发中复选框用法示例
2018/03/20 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
军训 自我鉴定
2014/02/03 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
小学英语复习计划
2015/01/19 职场文书
党员活动总结
2015/02/04 职场文书
z-index不起作用
2021/03/31 HTML / CSS
js实现上传图片到服务器
2021/04/11 Javascript
Python基础之条件语句详解
2021/06/16 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
Nginx如何配置根据路径转发详解
2022/07/23 Servers