jQuery 事件对象的属性和方法

jQuery 事件对象的属性和方法
参考资料:
《锋利的jQuery》    作者: 单东林 张晓菲 魏然    出版社: 人民邮电出版社

1、event.type:获取事件的类型

2、event.target:获取触发事件的元素

3、event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标

4、event.preventDefault() 方法:阻止默认行为
<%@ 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() {
				$("a").click(function(event) {
					alert(event.type);	//获取事件类型(此处弹出 click)
					alert(event.target.href);		//获取触发事件的元素的 href 属性值
					alert("当前鼠标坐标:" + event.pageX + ", " + event.pageY);	//获取鼠标当前坐标
					event.preventDefault();		//阻止链接跳转
				});
			});	
		</script>  	
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<a href="http://www.google.com/">Google</a>
  	</body>
</html>

5、event.stopPropagation() 方法:
<%@ 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() {
				//为 <span> 元素绑定 click 事件
				$("span").click(function() {
					$("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
				});
				//为 Id 为 content 的 <div> 元素绑定 click 事件
				$("#content").click(function(event) {
					$("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
					event.stopPropagation();	//阻止事件冒泡
				});
				//为 <body> 元素绑定 click 事件
				$("body").click(function() {
					$("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
				});
			});
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			#content {
				background: #b17af5;
			}		
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<div id="content">
  			外层div元素<br />
  			<span style="background: silver;">内层span元素</span><br />
  			外层div元素
  		</div><br />
  		<div id="msg"></div>
  	</body>
</html>

6、event.which:获取在鼠标单击时,单击的是鼠标的哪个键

<script type="text/javascript">
	$(function() {
		$("body").mousedown(function(event) {
			//1:鼠标左键;2:鼠标中建;3:鼠标右键
			alert(event.which);	
		});
	});	
</script>  	


你可能感兴趣的:(html,jquery,String,function,Path,div)