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>