您的位置：首页 > Web前端 > JQuery

jQuery 事件对象的属性和方法

2012-08-13 16:26 555 查看

jQuery 事件对象的属性和方法

参考资料：

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

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

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

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

4、event.preventDefault() 方法：阻止默认行为

[/b]

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航