博客

jQuery on()方法

  • Post category:jquery

jQuery on()方法用于在元素上绑定一个或多个事件处理程序。可以使用on()方法绑定单个事件处理程序，也可以绑定多个事件处理程序。

以下是on()的详细攻略：

语法

$(selector).on(event, childSelector, data, function)

参数

  • selector：必需，用于选择要绑事件的元素。
  • event：必需，用于指定要绑定的事件类型。
  • childSelector：可选，用于指定要绑定事件的后代元素。
  • data：可选，用于递到事件处理程序的数据。
  • function：必需，用于指定要绑定的事件处理程序。

示例1：绑定单个事件处理程序

以下示例演示了如何使用on()方法绑定单个事件处理程序：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery on() Method</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $('#myButton').on('click', function() {
      alert('Hello World!');
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个按钮，并使用on()方法绑定了一个事件处理程序。在事件处理程序中，我们使用alert()方法显示一个消息框。

示例2：绑定多个事件处理程序

以下示例演示了如何使用on()方法绑定多个事件处理程序：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery on() Method</title>
  <script srchttps://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $('#myButton').on({
      mouseenter: function() {
        $(this).css('background-color', 'yellow');
      },
      mouseleave: function() {
        $(this).css('background-color', 'white');
      },
      click: function() {
        alert('Hello World!');
      }
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个按钮，并使用on()方法绑定了三个事件处理程序：mouseenter、mouseleave和click。在事件处理程序中，我们使用css()方法更改按钮的背景颜色，并使用alert()方法显示一个消息框。

注意事项

  • jQuery on()方法用于在元素上绑定一个或多个事件处理程序。
  • 可以使用$()引用触发事件的元素。
  • 可以使用on()方法绑定单个事件处理程序，也可以绑定多个事件处理程序。
Tags: