JQuery的ON()方法支持的所有事件罗列

JQuery是一个常用的JavaScript库，它提供了包括DOM操作、事件处理、Ajax等功能。其中，事件处理是很重要的一部分，而JQuery提供了ON()方法来绑定事件。本文将详细讲解“JQuery的ON()方法支持的所有事件”。

什么是ON()方法？

ON()是JQuery提供的一种事件绑定方法，它能够绑定多个事件到一个或多个选择器上，也能够给未来动态添加的元素绑定事件，是一个非常强大的事件绑定方法。

ON()方法支持的所有事件

ON()方法支持的事件非常多，包括鼠标事件、键盘事件、表单事件、文档/窗口事件等等。以下是ON()方法支持的所有事件：

鼠标事件

• click
• dblclick
• mouseenter
• mouseleave
• mousemove
• mousedown
• mouseup
• hover

键盘事件

• keydown
• keyup
• keypress

表单事件

• submit
• change
• focus
• blur
• select

文档/窗口事件

• load
• resize
• scroll
• unload

自定义事件

• my-event

除了以上事件外，ON()方法还支持自定义事件，可以按照需求自定义一个事件来绑定到元素上。

ON()方法示例

下面我们来看两个使用ON()方法的示例。

示例 1：绑定多个事件

$('button').on({
  click: function() {
    alert('click');
  },
  mouseenter: function() {
    $(this).addClass('hover');
  },
  mouseleave: function() {
    $(this).removeClass('hover');
  }
});

上面的示例中，我们给button添加了三个事件，分别是click、mouseenter和mouseleave。当点击button时，弹出一个提示框；当鼠标移入button时，添加一个hover类；当鼠标移出button时，移除hover类。

示例 2：动态绑定事件

$('body').on('click', 'button', function() {
  alert('click');
});

上面的示例中，我们将click事件绑定到body元素上，然后使用选择器匹配到了button元素。当页面中新增了button元素时，这个事件会被自动绑定。这就是动态绑定事件的优势，能够处理之前并不存在的元素。