DOM中Event對象
DOM中引入Event對象(DOM瀏覽器就是標(biāo)準(zhǔn)瀏覽器)
(1)通過HTML標(biāo)記的事件屬性來傳遞event對象
在DOM中,event對象是作為事件調(diào)用函數(shù)時的參數(shù),傳遞給函數(shù)的。
該event參數(shù),是系統(tǒng)固定寫法,全小寫,不能加引號,它就是event對象參數(shù)
<!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)使用元素對象的事件屬性來傳遞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參數(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中Event對象屬性
type:當(dāng)前的事件類型
clientX和clientY:距離窗口左邊和上邊的距離
pageX和pageY:距離網(wǎng)頁左邊和上邊的距離
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)坐標(biāo)信息 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>