<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>27-jQuery事件自动触发</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { $(".son").click(function(){ alert("son"); }); $(".father").click(function(){ alert("father"); }); // 自动触发事件 // $(".father").trigger("click"); // $(".father").triggerHandler("click"); /* trigger: 使用trigger自动触发事件，会触发事件冒泡 triggerHandler：不会触发冒泡事件 */ // $(".son").trigger("click"); // $(".son").triggerHandler("click"); // $("input[type='submit']").click(function(){ // alert("submit"); // }); // trigger： 利用trigger自动触发事件，会触发默认行为 // $("input[type='submit']").trigger("click"); // triggerHandler 不会触发默认行为 // $("input[type='submit']").triggerHandler("click"); $("a").click(function(){ alert("a"); }); // $("a").triggerHandler("click"); $("a").trigger("click"); }); </script> </head> <body> <div class="father"> <div class="son"></div> </div> <a href="http://www.baidu.com">我是百度</a> <form action="http://www.taobao.com"> <input type="text"> <input type="submit"> </form> </body> </html>
关于自动触发a标签将部分代码修改：
<script> $("span").click(function(){ alert("a"); }); // $("span").triggerHandler("click"); $("span").trigger("click"); </script>
<body> <div class="father"> <div class="son"></div> </div> <a href="http://www.baidu.com"><span>注册</span></a> <form action="http://www.taobao.com"> <input type="text"> <input type="submit"> </form> </body>