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 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
vue--vuex详解
2019/04/15 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
Python编程入门的一些基本知识
2015/05/13 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python3多线程基础知识点
2019/02/19 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python中自带的三个装饰器的实现
2019/11/08 Python
python通过链接抓取网站详解
2019/11/20 Python
python with语句的原理与用法详解
2020/03/30 Python
python中的django是做什么的
2020/07/31 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
JPA的优势都有哪些
2013/07/04 面试题
金融管理应届生求职信
2014/02/20 职场文书
知识竞赛主持词
2014/03/26 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
爱国影片观后感
2015/06/18 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技