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

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 阻止了 绑定事件的元素的默认行为

赞 (0)

相关推荐

  • jQuery trigger()方法用法介绍

    jQuery的trigger()方法用法介绍: 此方法可以触发匹配元素上指定类型的事件. 它具有两种语法格式,下面就分别做一下介绍. 语法结构一: 复制代码 代码如下: $(selector).trigger(event,[param1,param2,...]) 参数解析: 1.event:必需,规定匹配元素要触发的事件,可以是自定义事件,也可以是标准的事件. 2.param:可选,传递给事件处理函数的参数. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&

  • jQuery中triggerHandler()方法用法实例

    本文实例讲述了jQuery中triggerHandler()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发被选元素的指定事件类型. 从上面定义可以看出此方法和trigger()方法功能上很类似,但还是有巨大区别.以下是主要区别: 1.此方法不会触发浏览器默认事件. 2.此方法触发jQuery对象集合中第一个元素的事件处理函数,不会产生事件冒泡. 3.此方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象. 语法结构: 复制代码 代码如下: $(selector).t

  • jquery trigger实现联动的方法

    本文实例讲述了jquery trigger实现联动的方法.分享给大家供大家参考,具体如下: <html> <head> <title>testing</title> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $

  • jQuery中trigger()与bind()用法分析

    本文实例讲述了jQuery中 trigger()与bind()用法.分享给大家供大家参考,具体如下: trigger(type) 在每一个匹配的元素上触发某类事件. 返回值:jQuery 参数: type (String): 要触发的事件类型 示例: 复制代码 代码如下: $("p").trigger("click") 1.trigger() 触发事件 这个方法是jQuery 1.3中新增的一个引起触发事件的函数. 这里的事件就如jQuery的帮助文档中的事件那一栏

  • jquery trigger函数执行两次的解决方法

    jquery trigger函数执行两次的解决方法

    本文实例讲述了jquery trigger函数执行两次的解决方法.分享给大家供大家参考,具体如下: 一.问题如下: 有如下代码: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> *{margin:0;pa

  • jquery trigger伪造a标签的click事件取代window.open方法

    var ohtml='<div class="friend-dialog tac pt15 pb20">'+ '<div class="f-h32">您已经成功发送好友申请.</div>'+ ' <p class="c999">上传真实头像,好友申请更容易被通过哦,赶紧上传头像吧!</p> '+ '<a href="<%=path%>/teacher/edit

  • jQuery中trigger()方法用法实例

    本文实例讲述了jQuery中trigger()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发匹配元素指定类型的事件. 语法结构一: 规定匹配元素被触发的事件类型. 复制代码 代码如下: $(selector).trigger(event,param1,param2,...) 参数列表: 参数 描述 event 规定指定元素要触发的事件. 可以是自定义事件(使用 bind() 函数来附加),或者任何标准事件. param 可选.传递到事件处理程序的额外参数. 额外的参数对自定义事件特别

  • jQuery中值得注意的trigger方法浅析

    jQuery中值得注意的trigger方法浅析

    介绍 trigger方法的功能是在所选择的元素上触发指定类型的事件,其调用的语法格式为:trigger(type,[data]) ,其中参数type为触发事件的类型,参数data为可选项,表示在触发事件时,传递给函数的附件参数. 常用模拟 有时,不需要进行操作,也想模拟用户操作达到某些效果.比如在用户进入界面后就触发click事件,而不需要用户去点击. 在jquery中可以使用trigger完成. $("#btn").trigger("click")//触发id为b

  • jQuery如何使用自动触发事件trigger

    jQuery如何使用自动触发事件trigger

    有时候,需要通过模拟用户操作,来达到点击的效果,例如用户进入页面后 就触发click事件,而无需主动点击. 比如以下代码: <body> <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x1'">点击1</a> <a href="#" onclick="javascript:document.getE

  • jquery中trigger()无法触发hover事件的解决方法

    今天做一个项目,遇到了一个问题,是以前没有遇到过的,就此记上一笔. 1.trigger方法解释 官方是这么解释的: 复制代码 代码如下: Description: Execute all handlers and behaviors attached to the matched elements for the given event type. 用法: .trigger( eventType [, extraParameters] ) 其中eventType包含javascript内置的事件

随机推荐