jquery监听

jQuery 事件监听方法

jQuery 提供了多种方法来监听 DOM 事件，以下是常用的几种方式：

.on() 方法
语法：$(selector).on(event, handler)
示例：

$("#button").on("click", function() {
  console.log("Button clicked");
});

.click() 方法
语法：$(selector).click(handler)
示例：

$("#button").click(function() {
  console.log("Button clicked");
});

.hover() 方法
语法：$(selector).hover(handlerIn, handlerOut)
示例：

$("#element").hover(
  function() { console.log("Mouse entered"); },
  function() { console.log("Mouse left"); }
);

.keypress() 方法
语法：$(selector).keypress(handler)
示例：

$("#input").keypress(function(event) {
  console.log("Key pressed: " + event.which);
});

事件委托
使用 .on() 方法可以实现事件委托，适用于动态添加的元素：

$("#parent").on("click", ".child", function() {
  console.log("Child element clicked");
});

移除事件监听

.off() 方法
语法：$(selector).off(event)
示例：

$("#button").off("click");

一次性事件监听

.one() 方法
语法：$(selector).one(event, handler)
示例：

$("#button").one("click", function() {
  console.log("This will only run once");
});

自定义事件

jQuery 允许触发和监听自定义事件：

$("#element").on("customEvent", function() {
  console.log("Custom event triggered");
});

$("#element").trigger("customEvent");

注意事项

• 使用 .on() 是最推荐的方式，因为它功能全面且支持事件委托。
• 事件委托可以提高性能，特别是在动态内容较多的页面中。
• 避免过度使用匿名函数，以便后续可以移除事件监听。