jquery的trigger和triggerHandler的区别示例介绍


Posted in Javascript onApril 20, 2014

trigger 和triggerHandler都是模拟事件发生的 用具体的案例来描述一下区别

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>test</title> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> </head> 
<body> 
<input type="checkbox" /> 
<input type="text" id="test"/> 
<input type="button" value="button" id="bnt" onclick="bntClick()"/> 
</body> 
<script> 
$( document ).ready(function() { 
$("input[type='checkbox']").bind("click",function(){ 
$("#test").val("www.baidu.com"); 
}); 
}); 
function bntClick(){ 
$("input[type='checkbox']").trigger("click"); 
} 
</script> 
</html>

当点击 checkbox的时候 checkbox勾上 并将input[type='text']赋值www.baidu.com

当点击 input[type='button'] 的时候 就会发生跟点击checkbox同样的事情

将trigger换成triggerHandler时候 当点击 input[type='button'] 的时候 就只会给input[type='text']赋值 而不会勾选checkbox

triggerHandler 阻止了 绑定事件的元素的默认行为

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 #Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 #Javascript
jQuery响应enter键的实现思路
Apr 18 #Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 #Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 #Javascript
用jquery仿做发微博功能示例
Apr 18 #Javascript
实例说明为什么不要行内使用javascript
Apr 18 #Javascript
You might like
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
php实现websocket实时消息推送
2018/03/30 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
一个javascript参数的小问题
2008/03/02 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
python安装scipy的步骤解析
2019/09/28 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
怎么处理XML的中文问题
2015/03/26 面试题
项目经理的岗位职责
2013/11/23 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js