jquery的事件自动触发

  1. 事件触发的介绍

事件都是在特定条件下发生的，不同类型的事件触发的实际时机是无法预测的。开发者无法知道用户何时单击按钮提交表单，或者何时输入文本。但是在很多情况下，开发人员需要在脚本中控制事件触发的实际。

例如：设计一个弹出广告，广告上面虽然有小小的关闭标签提供了广告关闭，但是也应该有一个小小的条件，那就是让广告三秒钟后就会关闭

  1. 事件触发的方式

//方法一
// $(".father").trigger(“click”);
//方法二
// $(".father").triggerHandler(“click”);

  1. 既然有两种事件触发的行为，那么它们必定有区别(有两种区别）

第一个区别：注意，如果利用trigger()自动触发事件，会触发事件冒泡,如果使用triggerHandler()
* 自动触发事件，不会触发事件冒泡
*
* 第二个区别：trigger()，如果利用trigger自动触发事件，会触发默认行为、triggerHandler()自动触发事件
* 不会触发默认的行为（不会触发事件冒泡也不会触发默认事件行为）

  1. 那么难搞的问题来咯，如果自动触发默认行为，不止回弹，还会跳转，例如我想trigger自动触发a标签的默认事件和默认行为，不止让他回弹一下怎么办呢？

那就需要在a标签中写一个span标签对a内容进行包装 ，那么以后就不需要触发a标签了，直接监听span的标签

代码演示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件自动触发</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
			}
			.son{
				width: 100px;
				height: 100px;
				background:cadetblue;
			}
		</style>
		<script type="text/javascript" src="js/Jquery.js"></script>
		<script type="text/javascript">
			$(function(){
			//自动出发了默认行为，不止回弹以外还会跳转(如果你想用trigger自动触发a的默认事件和默认行为，那就需要对a进行包装)
			//监听span标签的
			$("span").trigger("click");
				alert("a");
			});
			$("span").trigger("click");//自动触发a的默认行为还会进行跳转
		</script>
	</head>
	<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>
</html>
两种跳转方式的区别
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件自动触发</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.father{
				width: 200px;
				height: 200px;
				background: red;
			}
			.son{
				width: 100px;
				height: 100px;
				background:cadetblue;
			}
		</style>
		<script type="text/javascript" src="js/Jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				
				/*
				 * 事件出发的方法有两种，
				 * 方法一、
				 * 		$(".father").trigger("click");
				 * 方法二、
				 * 		$(".father").triggerHandler("click");
				 * 两种方法都行那么实际开发的时候用那个呢，区别在哪里呢？
				 * 第一个区别：注意，如果利用trigger()自动触发事件，会触发事件冒泡,如果使用triggerHandler()
				 * 自动触发事件，不会触发事件冒泡
				 * 
				 * 第二个区别：trigger()，如果利用trigger自动触发事件，会触发默认行为、triggerHandler()自动触发事件
				 * 不会触发默认的行为（不会触发事件冒泡也不会触发默认事件行为）
				 * */
				//给儿子添加一个顶级事件
//				$(".son").click(function(){
//					alert("son");
//				});
				//给父亲添加一个顶级事件
//				$(".father").click(function(){
//					alert("father");
//				});
				//方法一
//				$(".father").trigger("click");
				//方法二
//				$(".father").triggerHandler("click");

				//$(".son").trigger("click");
				//$(".son").triggerHandler("click");
				
				//$("input[type='submit']").click(function (){
					//	alert('submit');
				//});
				//$("input[type='submit']").trigger("click");
				//$("input[type='submit']").triggerHandler("click");
				$("a").click(function(){
					alert("a");
				});
			//	$("a").triggerHandler("click"); 自动触发顶级事件没有跳转
			//监听a标签的
			$("a").trigger("click");
			});
		</script>
	</head>
	<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>
</html>