jQuery事件自动触发极简教程

最新推荐文章于 2023-04-09 21:22:15 发布

Akimoto Hiroshi

最新推荐文章于 2023-04-09 21:22:15 发布

阅读量847

点赞数

分类专栏： jQuery 文章标签： js jquery javascript

本文链接：https://blog.csdn.net/dyw3390199/article/details/107052246

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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/">&nbsp;Bilibili&nbsp;</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标签包装一下：
原来是
在这里插入图片描述
现在要改为：

Akimoto Hiroshi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件自动触发极简教程

<!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{ backgrou
复制链接

扫一扫

专栏目录