Introducing the Event object into DOM (the DOM browser is the standard browser)
(1) Pass the event through the event attribute of the HTML mark Object
In the DOM, the event object is passed to the function as a parameter when the event calls the function.
The event parameter is a fixed writing method of the system. It is all lowercase and cannot be quoted. It is the event object parameter.
<!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) Use the event attribute of the element object to pass the event object
<!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>
##Event object properties in DOM
- type: the current event type
- clientX and clientY: distance from the left and top of the window
- pageX and pageY: distance from the left and top of the web page
- screenX and screenY: distance from the left and top of the screen
<!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>
Next Section
