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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
jQuery实现大图轮播
Feb 13 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
微信小程序slider组件使用详解
Jan 31 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
php如何获取Http请求
2020/04/30 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python获取目录下所有文件的方法
2015/06/01 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
python属于解释型语言么
2020/06/15 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
年终考核实施方案
2014/05/26 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
丧事答谢词
2015/01/05 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
MySQL 字符集 character
2022/05/04 MySQL