<!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>
运行以后:
如果把代码改为:
<script>
$(function () {
$('.son').click(function () {
alert('son');
});
$('.father').click(function () {
alert('father');
});
//triggerHandler不会触发事件冒泡
$('.son').triggerHandler('click');
})
</script>
结论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标签包装一下:
原来是
现在要改为: