DOM? ??? ??
DOM? ??? ?? ????(DOM ????? ?? ????)
(1) HTML ??? ??? ??? ?? ??? ??? ?????.
DOM??? ??? ??? ??? ??? ?????. ??? ???? ??? ??? ???? ???????.
??? ????? ???? ??? ?? ???? ?? ????? ??? ? ????. ??? ?? ???????.
<!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對象參數(shù)
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) ??? ??? ????? ?? ??? ??? ??? ?????
<!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參數(shù)，但形參必須接收
//第一個形參，一定是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
? ??? ?? ??: ?? ??? ??
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)
{
//獲取單擊時，相關(guān)坐標信息
var str = "窗口左邊距離："+e.clientX+"，窗口頂邊距離："+e.clientY;
str += "\n網(wǎng)頁左邊距離："+e.pageX+"，網(wǎng)頁頂邊距離："+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>
