JavaScript event事件

最新推荐文章于 2022-04-25 15:33:41 发布

houyanhua1

最新推荐文章于 2022-04-25 15:33:41 发布

阅读量380

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/houyanhua1/article/details/78531786

版权

JavaScript 专栏收录该内容

140 篇文章 4 订阅

订阅专栏

Event对象简介
当事件发生时，会自动向事件调用函数，传递一个event参数。那么，这个event参数，就是event对象。
Event对象的作用：可以获取当前事件发生时的环境信息。如：点击时的坐标值。
Event对象是短暂存在的，也就是：当一个新的事件发生时，这个event对象就消失了。
每时每刻，只能有一个事件发生。每时每刻，只能有一个event对象产生。

一、DOM中Event对象——标准浏览器(火狐、谷歌)
1、DOM中引入Event对象
（1）通过HTML标记的事件属性来传递event对象
提示：在传递event时，该event参数，必须全小写，并且不能加引号。
（2）使用元素对象的事件属性来传递event对象

2、DOM中Event对象属性
type：事件类型
clientX和clientY：相对浏览器窗口的坐标。(包括滚动条)
pageX和pageY：相对网页左端和顶端的距离。(不包括滚动条)
screenX和screenY：相对显示屏幕左端和顶端的距离。

二、IE中Event对象
在IE中，event是window对象的一个属性。如：window.event或event。所以js函数中不用传递参数，直接使用。

IE中Event对象属性
type：事件类型
clientX和clientY：相对浏览器窗口的坐标。
x和y：相对于网页的坐标。

screenX和screenY：相对于屏幕的坐标。

DOM中(火狐谷歌浏览器)通过HTML标记的event属性来传递event对象：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：单击图片，显示坐标值
function get_xy(e)
{
	var str = "窗口左边距离："+e.clientX+",窗口上边距离："+e.clientY;
	str += "\n网页左边距离："+e.pageX+",网页顶边距离："+e.pageY;
	str += "\n屏幕左边距离："+e.screenX+",屏幕顶边距离："+e.screenY;
	str += "\n事件类型："+e.type;
	alert(str);
}
</script>
</head>
<body>
<img id="img01" width="400" src="images/01.jpg" οnclick="get_xy(event)" />   <!--event是固定写法，不带引号-->
</body>
</html>

DOM中(火狐谷歌浏览器)在JavaScript中用元素对象的事件属性来传递event对象：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：单击图片，显示坐标值
window.onload = function()
{
	//获取id=img01的元素对象
	var imgObj = document.getElementById("img01");
	//绑定onclick事件：这种情况不能带括号，也不能传参数
	//但是，第一个形参，就是event对象。
	imgObj.onclick = get_xy; //传地址，不带括号。带括号就相当于执行。
}
function get_xy(e)//必须接收event参数，第一个形参就是event对象。
{
	var str = "窗口左边距离："+e.clientX+",窗口上边距离："+e.clientY;
	str += "\n网页左边距离："+e.pageX+",网页顶边距离："+e.pageY;
	str += "\n屏幕左边距离："+e.screenX+",屏幕顶边距离："+e.screenY;
	str += "\n事件类型："+e.type;
	alert(str);
}
</script>
</head>
<body>
<img id="img01" width="400" src="images/01.jpg" />
</body>
</html>

IE中引入event对象：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：在IE中，获取鼠标坐标值
function get_xy()
{
	var str = "窗口左边距离："+event.clientX+",窗口上边距离："+event.clientY; //event是window的一个属性，直接使用，不用通过参数传递。
	str += "\n网页左边距离："+event.x+",网页顶边距离："+event.y;  //ie中的x,y相当于DOM(火狐谷歌)中的pageX,pageY
	str += "\n屏幕左边距离："+event.screenX+",屏幕顶边距离："+event.screenY;
	str += "\n事件类型："+event.type;
	alert(str);
}
</script>
</head>

<body>
<img width="400" src="images/01.jpg" onClick="get_xy()" />
</body>
</html>

为了兼容DOM(火狐谷歌)和IE浏览器，可以用三元运算符：

var x = e.clientX ? e.clientX : event.clientX; //JavaScript中，用三元运算符兼容IE。