click() 方法可模拟在按钮上的一次鼠标单击
语法:buttonObject.click()
example:
<html>
<head>
<script type="text/javascript">
function clickButton()
{
document.getElementById('button1').click()
}
function alertMsg()
{
alert("Button 1 was clicked!")
}
</script>
</head>
<body onload="clickButton()">
<form>
<input type="button" id="button1" onclick="alertMsg()"
value="Button 1" />
</form>
</body>
</html>
上面的例子将在 body onload 上模拟在按钮上的一次鼠标单击:
trigger() 触发被选元素上指定的事件以及事件的默认行为
相比click(),trigger()可以接受参数,而click不接受
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#button1').click(function(){
alert('button1');
$('#button2').trigger('click'); //点击1的时候,触发2的单击事件
});
$('#button2').click(function(){//而2的点击事件触发3的myEvent事件,并给myEvent传递两个参数
alert('button2');
$("#button3").trigger("myEvent", ["Hello","World!"]);
});
/*定义3的myEvent事件,该事件可以任意自定义,这里自定义为函数*/
$("#button3").bind("myEvent", function (event, message1, message2) { //自定议事件myevent
alert(message1 + ' ' + message2);
});
});
</script>
</head>
<body style="text-align:center;">
<div style="margin-top:130px;">
<button id='button1'>click1</button>
<button id='button2'>click2</button>
<button id='button3'>click3</button>
</div>
</body>
</html>
trigger() 与triggerHandler()的对比:
1 该方法与 triggerHandler() 方法类似,不同的是 triggerHandler() 不触发事件的默认行为。
它不会引起事件(比如表单提交)的默认行为
2 .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
- 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>triggerHandler demo</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button><br><br>
<p>执行 .trigger 后 input 输入框自动获取焦点,触发事件的默认行为,而 .triggerHandler 仅仅
执行了指定的事件浏览器并未执行动作,输入框也没有获取焦点。</p>
<input type="text" value="将获取焦点">
<script>
$( "#old" ).click(function() {
$( "input" ).trigger( "focus" );
});
$( "#new" ).click(function() {
$( "input" ).triggerHandler( "focus" );
});
$( "input" ).focus(function() {
$( "<span>获取焦点!</span>" ).appendTo( "body" ).fadeOut( 1000 );
});
</script>
</body>
</html>
点击trigger的效果:
点击triggerHandler的效果: