jQuery 中事件的触发_jquery 在某个方法执行前事件-CSDN博客

本文链接：https://blog.csdn.net/aimartt/article/details/7861158

jQuery 中事件的触发

参考资料：
《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//为按钮注册 click 事件，然后出发 click 事件并传递数据
				$("#btn").bind("click", function(event, a, b) {
					alert("a = " + a +"; b = " + b);	//普通点击时，a 和 b 是 undefined
				}).trigger("click", ["Crazier", "Taylor Swift"]);
				
				/*
				   trigger() 方法触发事件后，会执行浏览器操作
				   如：文本框触发 focus 事件后，其本身也会获得焦点（浏览器默认操作），
				   若在触发事件后不想执行浏览器操作，可以使用 triggerHandler() 方法
				*/
				$(":text").focus(function() {
					alert("focus");
				}).triggerHandler("focus");	//文本框在触发完事件后不会获得焦点
			});	
		</script>  	
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<button id="btn">点我</button>
  		<div id="msg"></div>
  		<input type="text" />
  	</body>
</html>

可以在绑定事件的时候把事件类型用命名空间规范起来，便于管理。如：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//绑定多个 click 事件，并添加命名空间
				$("#nsbtn").bind("click.plugin", function() {
					$("#nsmsg").append("<p>click.plugin事件</p>");
				}).bind("click", function() {
					$("#nsmsg").append("<p>click事件</p>");
				});
				
				$("#unsbtn").click(function() {
					$("#nsbtn").trigger("click!");	//触发不包含在命名空间内的 click 事件
				});
			});	
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			.hint {display: none;}
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<button id="nsbtn">触发全部 click 事件</button>
  		<button id="unsbtn">只触发 click 事件</button>
  		<div id="nsmsg"></div>
  	</body>
</html>

trigger("click!") 中的感叹号表示触发不包含在命名空间内的 click 事件，若要触发所有 click 事件，去掉感叹号即可。