Objet événement dans DOM
Introduction des objets événement dans DOM (le navigateur DOM est le navigateur standard)
(1) Transmettre les événements via les attributs d'événement des balises HTML Objet
Dans le DOM, l'objet événement est passé à la fonction en tant que paramètre lorsque l'événement appelle la fonction.
Le paramètre d'événement est une méthode d'écriture fixe du système. Il est entièrement en minuscules et ne peut pas être cité. Il s'agit du paramètre d'objet d'événement
<!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) Utilisez l'attribut d'événement. de l'objet élément pour transmettre l'objet événement
<!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>Propriétés de l'objet événement dans DOM
type : type d'événement actuel
clientX et clientY : distance depuis la gauche et le haut de la fenêtre
pageX et pageY : distance entre la gauche et le haut de la page Web
screenX et screenY : distance entre la gauche et le haut de l'écran
<!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>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
