Comprendre les méthodes de liaison d'événements courantes jQuery-js tutoriel-php.cn

Comprendre les méthodes de liaison d'événements courantes jQuery

WBOY

Libérer： 2024-02-28 08:24:03

original

966 Les gens l'ont consulté

Comprendre les méthodes de liaison dévénements courantes jQuery

Pour comprendre les méthodes courantes de liaison d'événements jQuery, des exemples de code spécifiques sont nécessaires

Dans le développement front-end, la liaison d'événements est une opération très courante grâce à la liaison d'événements, vous pouvez obtenir des effets d'interaction de page, répondre aux opérations des utilisateurs et autres. les fonctions. Dans jQuery, il existe de nombreuses façons de lier des événements, y compris la liaison directe d'événements, en utilisant la méthode .on(), en utilisant la méthode .delegate() (obsolète), en utilisant la méthode .live() (obsolète), etc. Ce qui suit présentera en détail ces méthodes de liaison d’événements courantes et fournira des exemples de code correspondants.

Lier directement les événements : sélectionnez l'élément via le sélecteur, puis utilisez les méthodes de liaison d'événements de jQuery, telles que click(), mouseover(), etc. pour lier directement les événements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直接绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</head>
<body>
    <button id="btn">点击我</button>
</body>
</html>

Copier après la connexion

Utilisez la méthode .on() : La méthode .on() peut lier des événements aux éléments sélectionnés ou à des éléments ajoutés dynamiquement.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用.on()方法绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").on('click', function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</head>
<body>
    <button id="btn">点击我</button>
</body>
</html>

Copier après la connexion

Utilisez la méthode .delegate() (obsolète) : utilisez la méthode .delegate() pour lier les événements aux éléments enfants de l'élément sélectionné. Elle a été remplacée par la méthode .on() et n'est plus. recommandé.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用.delegate()方法绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#parent").delegate('#child', 'click', function(){
                alert("你点击了子元素！");
            });
        });
    </script>
</head>
<body>
    <div id="parent">
        <button id="child">点击我</button>
    </div>
</body>
</html>

Copier après la connexion

Utilisez la méthode .live() (obsolète) : utilisez la méthode .live() pour ajouter dynamiquement des événements de liaison d'élément à l'élément sélectionné. Elle a été remplacée par la méthode .on() et n'est plus recommandée. .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用.live()方法绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#container").append('<button class="btn">点击我</button>');
            $(".btn").live('click', function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</head>
<body id="container">
    <!-- 动态添加的按钮 -->
</body>
</html>

Copier après la connexion

Grâce aux exemples de code ci-dessus, nous pouvons voir les opérations spécifiques de différentes méthodes de liaison d'événements dans des applications pratiques. Dans le développement réel, il est très important de choisir la méthode de liaison d'événements appropriée en fonction de vos besoins. Dans le même temps, vous devez également faire attention à la mise à jour de la version jQuery pour éviter d'utiliser des méthodes obsolètes. J'espère que le contenu ci-dessus pourra aider tout le monde à mieux comprendre les méthodes courantes de liaison d'événements de jQuery.

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!