clcik() && trigger()

作者: 爱学习的小青蛙 | 来源:发表于2018-10-24 19:06 被阅读0次

clcik() && trigger()
zabbixApi4j-Trigger
Apex | before trigger 与 after tr
jQuery事件自动触发
COMP9311 Database Systems WEEK7
jQuery的trigger()和e.data
jQuery源码解析之trigger()
Trigger
Trigger
16 触发器

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的效果：