DOM中Event对象
DOM中引入Event对象(DOM浏览器就是标准浏览器)
（1）通过HTML标记的事件属性来传递event对象
在DOM中，event对象是作为事件调用函数时的参数，传递给函数的。
该event参数，是系统固定写法，全小写，不能加引号，它就是event对象参数
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
//在HTML中，如何通过事件来传递event对象参数
function get(e){
//获取单击时，距离窗口左边和上边的距离
alert(e.clientX+","+e.clientY);
}
</script>
</head>
<body style="margin:0px">
<img width="400" src="/upload/course/000/000/009/580af7f52278b486.jpg" onclick="get(event)" />
</body>
</html>（2）使用元素对象的事件属性来传递event对象
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
window.onload = function(){
//获取id=img1的图片对象
var imgObj=document.getElementById("img1");
//增加onclick事件
imgObj.onclick=get;
}
//不能传event参数，但形参必须接收
//第一个形参，一定是event对象
function get(e){
//获取单击时，距离窗口左边和上边的距离
alert(e.clientX+","+e.clientY);
}
</script>
</head>
<body style="margin:0px">
<img id="img1" width="400" src="/upload/course/000/000/009/580af7f52278b486.jpg" />
</body>
</html>DOM中Event对象属性
type：当前的事件类型
clientX和clientY：距离窗口左边和上边的距离
pageX和pageY：距离网页左边和上边的距离
screenX和screenY：距离屏幕左边和上边的距离
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
function get(e)
{
//获取单击时，相关坐标信息
var str = "窗口左边距离："+e.clientX+"，窗口顶边距离："+e.clientY;
str += "\n网页左边距离："+e.pageX+"，网页顶边距离："+e.pageY;
str += "\n屏幕左边距离："+e.screenX+"，屏幕顶边距离："+e.screenY;
str += "\n事件类型："+e.type;
window.alert(str);
}
</script>
</head>
<body style="margin:0px">
<img id="img1" width="400" src="/upload/course/000/000/009/580af7f52278b486.jpg" onclick="get(event)" />
</body>
</html>
一辆想出轨的无轨电车
图片不错。。好看。。。
8年前 添加回复 0