jQuery事件自动触发极简教程

技术2022-07-10 97

<!DOCTYPE html> <html> <head> <title>jQuery事件自动触发</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } .father{ background: skyblue; width: 400px; height: 400px; } .son{ background: yellow; width: 100px; height: 100px; } a{ text-decoration: none; font-size: 25px; color: pink; background-color: black; border-radius: 10px } </style> <script> $(function () { $('.son').click(function () { alert('son'); }); $('.father').click(function () { alert('father'); }); //trigger会触发事件冒泡 $('.son').trigger('click'); }) </script> </head> <body> <div class="father"> <div class="son"></div> </div> <a href="https://www.bilibili.com/"> Bilibili </a><br> <form action="https://www.bilibili.com/"> <input type="text" name=""> <input type="submit" value="submit"> </form> </body> </html>

运行以后：如果把代码改为:

结论1： trigger会触发事件冒泡,triggerHandler不会触发事件冒泡

如果我们这样修改：

$("input[type='submit']").click(function () { alert('submit'); }) $("input[type='submit']").trigger('click');

运行一下，显示了submit,然后自动跳转到b站了

如果我们用triggerHandler():

$("input[type='submit']").click(function () { alert('submit'); }) $("input[type='submit']").triggerHandler('click');

运行结果，只显示submit，不会跳转到b站

结论2： trigger会触发事件默认行为,triggerHandler不会触发事件默认行为

注意: 对于a标签，比较特殊，不论trigger()还是triggerHandler()方法，都不会触发a标签的默认行为(跳转到链接页面)

$('a').click(function () { alert('a'); }); $('a').trigger('click');

或者

$('a').click(function () { alert('a'); }); $('a').triggerHandler('click');

都不会跳转，只会弹出a

如果需要自动触发a标签的同时触发a标签的默认行为，需要把a标签包装一下：原来是现在要改为：

Processed: 0.026, SQL: 9