Understand jQuery common event binding methods-JS Tutorial-php.cn

Understand jQuery common event binding methods

WBOY

Release： 2024-02-28 08:24:03

Original

973 people have browsed it

Understand jQuery common event binding methods

Understanding common jQuery event binding methods requires specific code examples

In front-end development, event binding is a very common operation, which can be achieved through event binding Page interaction effects, response to user operations and other functions. In jQuery, there are many ways to bind events, including directly binding events, using the .on() method, using the .delegate() method (deprecated), using the .live() method (deprecated), etc. The following will introduce these common event binding methods in detail and provide corresponding code examples.

Directly bind events: select elements through the selector, and then use jQuery's event binding methods, such as click(), mouseover(), etc. to directly bind events.

<!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>

Copy after login

Use the .on() method: The .on() method can bind events to the selected elements or to dynamically added elements.

<!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>

Copy after login

Use the .delegate() method (deprecated): Use the .delegate() method to bind events to the child elements of the selected element, which has been replaced by the .on() method , is not recommended for further use.

<!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>

Copy after login

Use the .live() method (deprecated): Use the .live() method to bind events to elements dynamically added to the selected element, which has been replaced by the .on() method Replacement, not recommended for use.

<!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>

Copy after login

Through the above code examples, we can see the specific operations of different event binding methods in practical applications. In actual development, it is very important to choose the appropriate event binding method according to your needs. At the same time, you should also pay attention to the update of the jQuery version to avoid using obsolete methods. I hope the above content can help everyone better understand jQuery's common event binding methods.

The above is the detailed content of Understand jQuery common event binding methods. For more information, please follow other related articles on the PHP Chinese website!