communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

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>


Formation continue
||
<!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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492411 joue