on() jQuery - JavaScript

介绍

on() 方法是 jQuery 库中最常用的事件绑定方法之一。该方法是绑定事件处理程序的推荐方法，因为它比其他方法（如 click() 和 bind() 等）更灵活、更可靠，并且可以处理动态添加的元素。

on() 方法就像一个中央控制器，它可以将事件处理程序附加到元素上，但是，它也可以对新添加的元素和动态元素进行事件处理，因此，当您将元素添加到文档中时，它可以在不做任何其他事情的情况下运行。

格式

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

参数

• event: 必需，规定要附加的一个或多个事件（多个事件用空格分隔）。
• childSelector: 可选，规定只在选择器匹配的后代元素上触发事件。
• data: 可选，规定传递到函数的额外数据。
• function: 必需，规定要运行的函数。

使用例子

Example 1: click() 事件

$(document).ready(function(){
  $("p").on("click", function(){
    $(this).hide();
  });
});

该代码会将 click 事件附加到所有 p 元素上。当用户单击任何 p 元素时，它将被隐藏。

Example 2: hover() 事件

$(document).ready(function(){
  $("p").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
      $(this).css("background-color", "white");
    }
  });
});

该代码将 hover 事件附加到所有 p 元素上。当用户将鼠标指针移动到 p 元素上时，它将变成灰色；当用户将鼠标指针移开时，它将变回白色。

Example 3: 实现多个事件处理程序

$(document).ready(function(){
  $("input").on({
    mouseenter: function(){
      $(this).css("background-color", "lightblue");
    },
    mouseleave: function(){
      $(this).css("background-color", "white");
    },
    click: function(){
      $(this).css("background-color", "yellow");
    }
  });
});

该代码将 mouseenter、mouseleave 和 click 事件都附加到所有 input 元素上。当用户将鼠标指针移动到 input 元素上时，它将变成浅蓝色；当用户将鼠标指针移开时，它将变回白色；当用户单击 input 元素时，它将变成黄色。

总结

使用 on() 方法可以方便地处理事件，不仅适用于静态元素，也适用于动态元素。此外，该方法强大的功能允许您附加多个事件类型、指定子元素等等，从而使您的代码更加灵活。