La différence entre la cible et celle des objets événementiels en Javascript-js tutoriel-php.cn

La différence entre la cible et celle des objets événementiels en Javascript

autoload

Libérer： 2021-04-15 13:54:52

original

1861 Les gens l'ont consulté

Lors de l'apprentissage des objets événementiels, je pense toujours que target et this sont identiques. Ce n'est que plus tard que j'ai découvert que la différence entre les deux est assez grande. Aujourd'hui, je vais vous emmener jeter un œil. .

1. Lorsque l'objet déclencheur est cohérent avec l'objet de liaison

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list">
        <li class="itm">item1</li>
        <li class="itm">item2</li>
        <li class="itm">item3</li>
        <li class="itm">item4</li>
        <li class="itm">item5</li>
    </ul>
    <script>
        const li=document.querySelector("ul li:nth-of-type(4)");
        console.log(li);

        li.addEventListener("click",function(e){
            console.log(e.target);
            console.log(this);
        });
    </script>
</body>

</html>

Copier après la connexion

Après avoir cliqué sur item4celi, les deux Le retour est le suivant :

La différence entre la cible et celle des objets événementiels en Javascript

2 Lorsque l'objet déclencheur est incohérent avec l'objet de liaison .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list">
        <li class="itm">item1</li>
        <li class="itm">item2</li>
        <li class="itm">item3</li>
        <li class="itm">item4</li>
        <li class="itm">item5</li>
    </ul>
    <script>
        const ul=document.querySelector("ul");
        console.log(ul);
        ul.addEventListener("click",function(e){
            console.log(e.target);
            console.log(this);
        });
    </script>
</body>

</html>

Copier après la connexion

Après avoir cliqué sur item4 ceci li, le résultat est le suivant :

La différence entre la cible et celle des objets événementiels en Javascript