In-depth understanding of jQuery events and practical tips-JS Tutorial-php.cn

In-depth understanding of jQuery events and practical tips

WBOY

Release： 2024-02-19 16:22:20

Original

965 people have browsed it

In-depth understanding of jQuery events and practical tips

Detailed explanation of jQuery events and application skills

jQuery is a popular JavaScript library that simplifies the process of processing HTML elements, handling events, and animation effects. In front-end development, event processing is a very important part, and jQuery provides rich event processing functions, which allows developers to handle various events more conveniently. This article will introduce the use of jQuery events in detail, and illustrate it with specific code examples.

1. Binding events

In jQuery, you can use the on() method to bind events. For example, the following code demonstrates how to trigger a processing function when a button is clicked:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery事件绑定</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn">点击我</button>

  <script>
    $(document).ready(function(){
      $("#btn").on("click", function(){
        alert("按钮被点击了！");
      });
    });
  </script>
</body>
</html>

Copy after login

In the above code, when the button is clicked, a prompt box pops up to display "The button was clicked!". Through the on() method we can bind multiple events, such as click, mouseenter, mouseleave, etc.

2. Event delegation

Event delegation is a common optimization technique that can reduce the number of event processing functions and improve performance. In jQuery, you can use the on() method in conjunction with an event proxy to implement event delegation. For example, the following code shows how to bind click events to multiple buttons through event delegation:

<!DOCTYPE html>
<html>
<head>
  <title>事件委托</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="btn-container">
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
  </div>

  <script>
    $(document).ready(function(){
      $("#btn-container").on("click", "button", function(){
        alert("按钮被点击了！");
      });
    });
  </script>
</body>
</html>

Copy after login

In the above code, through event delegation, the <div> element that wraps the button A click event handling function is bound. When the button is clicked, a prompt box pops up.

3. Prevent event bubbling and default behavior

When processing events, sometimes it is necessary to prevent event bubbling or default behavior. In jQuery, you can use the stopPropagation() method to prevent event bubbling, and the preventDefault() method to prevent the default behavior. The following example demonstrates how to prevent the default jump behavior of a link:

<!DOCTYPE html>
<html>
<head>
  <title>阻止默认行为</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <a href="https://www.example.com" id="link">点击跳转</a>

  <script>
    $(document).ready(function(){
      $("#link").on("click", function(event){
        event.preventDefault();
        alert("链接被点击了，但不会跳转！");
      });
    });
  </script>
</body>
</html>

Copy after login

In the above code, when the link is clicked, although the click event will be triggered, it will not jump to the specified link because the default behavior is blocked. .

4. Multiple event processing

In jQuery, you can bind multiple event processing functions at the same time and bind multiple events through a on() method. For example, the following example shows how to change the background color of an element when the mouse moves in and out:

<!DOCTYPE html>
<html>
<head>
  <title>多事件处理</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    $(document).ready(function(){
      $(".box").on({
        mouseenter: function(){
          $(this).css("background-color", "red");
        },
        mouseleave: function(){
          $(this).css("background-color", "yellow");
        }
      });
    });
  </script>
</body>
</html>

Copy after login

In the above code, when the mouse moves into the box, the background color changes to red; when the mouse moves out of the box, The background color changes to yellow.

Conclusion

This article introduces the common usage of jQuery events and some practical skills, including event binding, event delegation, preventing event bubbling and default behavior, multi-event processing, etc. Through the flexible use of jQuery events, various interactive effects can be easily achieved and the efficiency of front-end development can be improved. I hope that readers will have a deeper understanding of jQuery events and be able to flexibly apply them in actual projects through studying this article.

The above is the detailed content of In-depth understanding of jQuery events and practical tips. For more information, please follow other related articles on the PHP Chinese website!