Analyse d'événements du DOM en javascript (avec code)-js tutoriel-php.cn

Quel est l'événement ? A quoi servent les événements ? Cet article partagera avec vous l'analyse des événements du DOM en JavaScript et présentera le concept d'événements et l'utilisation des événements.

Événement

1. Qu'est-ce qu'un événement

Informer JS du comportement de l'utilisateur du programme, tel ? en tant qu'utilisateur cliquant sur HTML Un certain bouton sur la page et l'utilisateur saisissant le nom d'utilisateur et le mot de passe, etc.

 <script>
        var button = document.getElementById('btn');
//        获取按钮元素
        button.onclick = function () {
//        事件绑定
            console.log('你已点了我');
        }
    </script>

Copier après la connexion

Enregistrer l'événement
La fonction JS est associée. avec l'événement spécifié, et la fonction liée devient Le handle de l'événement
Lorsque l'événement est déclenché, la fonction liée sera appelée

L'attribut d'événement de l'élément HTML

représente l'enregistrement réel de la fonction événementielle
Cette méthode ne se sépare pas efficacement de la structure et du comportement HTML

<body>
<button onclick="mylove()" id="btn">按钮</button>
<script>
    function mylove() {
        console.log('你已点了我');
    }
</script>
</body>

Copier après la connexion

L'attribut événementiel du Objet DOM

sera L'objet Document est positionné dans l'élément de page THML
et renvoie l'attribut de corps de l'objet DOM, à travers lequel diverses fonctions d'événement d'enregistrement sont implémentées

<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = mylove;
    function mylove() {
        console.log('你已点了我');
    }
</script>
</body>

Copier après la connexion

Écouteur d'événement

Utilisez la méthode addEventLisener() pour appeler cette méthode pour indiquer que l'élément ajoute un écouteur d'événement

body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.attachEvent('onclick',function () {
        console.log('XXX');
    })
    function bind(element,eventName, functionName) {
        if (element.addEventListener) {
            element.addEventListener()
        }
    }
</script>

</body>

Copier après la connexion

ceci dans l'écouteur d'événement

Lors de l'utilisation de la méthode addEventListener() pour enregistrer des événements pour la page, cela fait référence à l'élément d'événement enregistré
Lors de l'utilisation la méthode attachEent() pour enregistrer les événements pour la page, cela fait référence à l'objet Window, pas à l'événement enregistré

<script>
    var qyc =document.getElementById('qyc');
    /*qyc.addEventListener('click',function () {
        console.log(this);//this指当前绑定事件的元素
    });*/
    /*qyc.attachEvent('onclick',function () {
        console.log(this);//this指当前环境的全局对象（Window对象）
    });*/
    bind(qyc,'click',function () {
        console.log(this);//在不同的浏览器中，this会有不同的表示
    });
    function bind(element, eventName, functionName) {
        if (element.addEventListener) {
        } else {
            element.attachEvent('on' + eventName, function () {
                functionName.call(element)

            });
        }
    }//此为IE8之前的版本兼容的解决方案
</script>
</body>

Copier après la connexion

3 Supprimer les événements enregistrés

removeEventListener. (), appelez cette méthode pour indiquer l'écouteur d'événement de suppression d'élément

<body>
<button id="qyc">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
    function mylove() {
        console.log('XXX');
    }
    qyc.addEventListener('click',mylove);
    qyc.addEventListener('click',function () {
        console.log('YYY');
    });
    qyc.removeEventListener('click',mylove);
    function unbind(element,eventName,functionName) {
        if (element.removeEventListener) {
            element.removeEventListener(eventName, functionName);
        }else {
            element.detachEvent('on' + eventName, functionName);
        }
    }
</script>
</body>

Copier après la connexion

4. L'objet événement

représente la suppression des événements enregistrés dans
Navigateurs. les versions antérieures à IE8 ne prennent pas en charge la méthode removeEventListener()

<body>
<button id="qyc" onclick="mylove(event)">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function (event) {
        console.log(event);
    });
    qyc.attachEvent('onclick',function () {
        console.log(window.event);
    });

    function bind(element,eventName, functipnName) {
        if (element.addEventListener){
            element.addEventListener(eventName,functipnName)
        } else {
          element.attachEvent('on' + eventName, function(){
             functipnName.call(element);
          });
        }
    }
</script>

Copier après la connexion

5. Obtenez la cible

L'objet Event fournit l'attribut cible pour obtenir l'élément HTML qui a déclenché l'événement en cours
L'objet Event fournit l'attribut currentTarget pour obtenir l'élément HTML qui a enregistré l'événement en cours

<style>
        ul {
           background-color: red;
        }
        #wl {
           background-color: blue;
        }
        a {
           background-color: yellow;
        }
    </style>
</head>
<body>
<ul id="yx">
    <li>单机游戏</li>
    <li id="wl"><a href="#">网络游戏</a></li>
    <li>手机游戏</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    yx.addEventListener('click',function (event) {
        console.log(event.target);
//        target属性-获取绑定当前事件目标元素
        console.log(event.currentTarget);
//        currentTarget属性-获取绑定当前事件目标元素
        console.log(this);
    });
    yx.attachEvent('onclick',function (event) {
//    IE8以下浏览器提供srcElement属性为target目标元素
        var e = event || window.event;
        console.log(e.srcElement);
    });
</script>
</body>

Copier après la connexion

6. Empêcher le comportement par défaut

N'utilisez pas la valeur par défaut, mais

<body>
<a href="#">链接</a>
<script>
    var aElement = document.getElementsByName('a');
    /*aElement.addEventListener('click',function(event){
        event.preventDefault();// 阻止默认行为
    });*/
    
    aElement.onclick = function (event) {
        event.preventDefault();
        return false;

    }
    aElement.attachEvent('onclick',function (event) {
        var e = event || window.event;
        e.returnValue = false;
    })
</script>
</body>

Copier après la connexion

7. Obtenez la souris

représentation pageX et pageY Par rapport à la page
clientX et clientY représentent la zone visible.
screenX et screenY représentent le

<body>
<script>
    var html = document.documentElement;
    html.addEventListener('click',function(event){
        console.log(event.pageX, event.pageY);
        // 鼠标坐标值相对于当前HTML页面
        console.log(event.clientX, event.clientY);
        // 鼠标坐标值相对于当前可视区域
        console.log(event.screenX, event.screenY);
        // 鼠标坐标值相对于当前屏幕的

        // 鼠标坐标值只能获取，不能设置
    });

</script>
</body>

Copier après la connexion

sur l'écran actuel 8. Flux d'événements

<style>
        #q1 {
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
        }
        #q2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding: 50px;
        }
        #q3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="q1">
    <div id="q2">
        <div id="q3"></div>
    </div>
</div>
<script>
    var q1 = document.getElementById('q1');
    q1.addEventListener('click',function(){
        console.log('这是d1... ...');
    }, false);
    var q2 = document.getElementById('q2');
    q2.addEventListener('click',function(){
        console.log('这是d2... ...');
    }, false);
    var q3 = document.getElementById('q3');
    q3.addEventListener('click',function(event){
        console.log('这是q3... ...');
        event.stopPropagation();
    }, false);
</script>
</body>

Copier après la connexion

Délégation d'événements

Un grand nombre d'éléments HTML enregistrent le même événement et la logique de gestion de l'événement est la même, ce qui entraînera une diminution de la vitesse de la page si le flux d'événements ne permet pas à ces éléments HTML d'avoir le même parent. Événement d'enregistrement d'élément de niveau

<body>
<div id="qh">
    <button id="qyc1">按钮</button>
    <button id="qyc2">按钮</button>
    <button id="qyc3">按钮</button>
</div>
<script>
    var qyc1 = document.getElementById('qyc1');
    qyc1.addEventListener('click',function(){
        console.log('这是个按钮');
    });
    var qyc2 = document.getElementById('qyc2');
    qyc2.addEventListener('click',function(){
        console.log('这是个按钮');
    });
    var qyc3 = document.getElementById('qyc3');
    qyc3.addEventListener('click',function(){
        console.log('这是个按钮');
    });
    var qh = document.getElementById('qh');
//    不把事件绑定给指定元素，绑定给共同父级和祖先元素
    qh.addEventListener('click',function (event) {
        var target = event.target;//触发事件目标元素
        if(targe.nodeName === 'BUTTON') {
           console.log('这是个按钮');
        }
    })
</script>
</body>

Copier après la connexion

Recommandations associées :

Analyse du modèle d'événement JS DOM

Comprendre les événements DOM dans javascript_javascript Conseils

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!