简洁易懂的jQuery：事件与jQuery-猿码集

1. jQuery 介绍

jQuery 是一个快速的，简洁的 JavaScript 库。它使得 HTML 文档遍历、事件处理、动画和 Ajax 简单化。无论是在网页开发还是手机应用开发中，jQuery 都受到了广泛的应用，是前端开发中不可或缺的一部分。

在 jQuery 中，事件是一种以响应某种行为为目的的动作。例如，当用户单击表单中的按钮时，您可以告诉 JavaScript 去查询服务器上的相应数据。

1.1 jQuery 作用

jQuery 用于简化 HTML 文档遍历和操作、事件处理、动画效果及 Ajax 等操作。

与原生 JavaScript 相比，jQuery 更加简单易用，可以让您更加快速地编写 JavaScript 代码。不需要重新发明轮子，并且避免了原生 JavaScript 中繁琐的写法。

1.2 jQuery 事件

jQuery 提供了一系列事件来响应用户行为，例如单击、双击、鼠标移动、键盘按下等等。jQuery 中常用的事件有：

click：单击事件

dblclick：双击事件

focus：元素获得焦点事件

blur：元素失去焦点事件

mouseenter：鼠标移入事件

mouseleave：鼠标移出事件

keypress：键盘按下事件

在 jQuery 中，可以通过选择器选择要绑定事件的元素，然后使用 on() 方法绑定事件处理函数。例如：


$(selector).on(eventName, function() {
  // 事件处理逻辑
});

其中，$(selector) 用于选择要绑定事件的元素，eventName 是事件名称，function() 是事件处理函数。

2. jQuery 事件处理函数

在 jQuery 中，事件处理函数就是用来响应事件的函数。它可以是在 JavaScript 中定义的函数，也可以是匿名函数。事件处理函数通常包括以下几个重要的参数：

event：表示触发的事件

this：表示绑定事件的元素

事件处理函数一般有两种绑定方式：

直接绑定：将事件处理函数直接指定给元素的 on[eventName] 属性。

间接绑定：将事件处理函数绑定到元素上，再通过一些条件来判断是否需要调用事件处理函数来响应该事件。

下面是一个简单的 jQuery 事件处理函数的示例：


$("button").click(function(event) {
  alert("Hello World!");
});

在上面的代码中，当用户单击按钮时，会弹出一个包含 "Hello World!" 的警告框。

2.1 防止事件冒泡

在事件处理函数中，有时需要防止事件冒泡到父元素，以免触发父元素的事件处理函数。在 jQuery 中，可以通过 event.stopPropagation() 方法来防止事件冒泡。例如：


$("div").click(function(event) {
  event.stopPropagation();
  alert("子元素被单击了！");
});
$("body").click(function() {
  alert("父元素被单击了！");
});

当用户单击 div 元素时，只会触发 div 元素的事件处理函数，不会触发 body 元素的事件处理函数。

3. jQuery 事件委托

事件委托是指将事件处理函数绑定到父元素上，然后通过条件判断来决定是否调用事件处理函数处理子元素的事件。这种方式可以避免给每个子元素都绑定事件处理函数而带来的代码冗余。

3.1 事件委托的优势

代码更少：不需要给每个子元素都绑定事件处理函数，减少了代码冗余，使代码更加简洁。

性能更好：使用事件委托能够减少事件绑定次数，避免了浏览器开销，并能够更好地利用事件冒泡机制。

动态绑定：对于动态生成的元素，同样能够进行事件绑定。

3.2 事件委托的实现方式

在 jQuery 中，可以使用 on() 方法绑定事件处理函数，并通过选择器指定要处理事件的子元素。例如：


$(父元素).on(事件名, 子元素, function() {
  // 事件处理逻辑
});

其中，父元素表示要绑定事件的父元素，事件名表示要绑定的事件名称，子元素表示要绑定事件的子元素，function() 表示事件处理函数。

下面是一个 jQuery 事件委托的简单示例：


$("ul").on("click", "li", function() {
  $(this).toggleClass("done");
});

在上面的代码中，当用户单击列表中的某个子元素时，会将该子元素的 class 属性切换为 "done"。

4. jQuery 中的常用事件方法

除了 on() 方法外，jQuery 还提供了一些常用的事件方法，例如：

4.1 trigger()

trigger() 方法可以用来触发事件，例如：


$("button").click(function() {
  alert("Hello World!");
});
$("button").trigger("click");

以上代码会在页面加载时自动弹出 "Hello World!" 警告框。

4.2 bind()

bind() 方法可以用来绑定事件处理函数，例如：


$("button").bind("click", function() {
  alert("Hello World!");
});

以上代码与 on() 方法的作用相同，也可以用来为元素绑定事件处理函数。

4.3 unbind()

unbind() 方法可以用来解除绑定事件处理函数，例如：


function hello() {
  alert("Hello World!");
}
$("button").bind("click", hello);
$("button").unbind("click", hello);

以上代码调用 unbind() 方法解除对 hello() 函数的绑定，即不再响应单击事件。

5. jQuery 中的事件扩展方法

在 jQuery 中，还提供了许多便于开发者使用的事件扩展方法，例如：

5.1 hover()

hover() 方法可以用来绑定 mouseenter() 和 mouseleave() 事件，例如：


$("button").hover(
  function() {
    $(this).addClass("highlight");
  },
  function() {
    $(this).removeClass("highlight");
  }
);

以上代码在用户将鼠标悬停在按钮上时，会添加 "highlight" class 属性；当鼠标移出按钮时，会移除 "highlight" class 属性。

5.2 keydown()

keydown() 方法可以用来绑定键盘按下事件，例如：


$(document).keydown(function(event) {
  if (event.which == 13) {
    alert("Enter 键被单击了！");
  }
});

以上代码在用户按下 Enter 键时，会弹出包含 "Enter 键被单击了！" 的警告框。

5.3 submit()

submit() 方法可以用来绑定表单提交事件，例如：


$("form").submit(function(event) {
  event.preventDefault();
  alert("表单已提交！");
});

以上代码在用户提交表单时，会弹出包含 "表单已提交！" 的警告框。

5.4 resize()

resize() 方法可以用来绑定浏览器窗口大小改变事件，例如：


$(window).resize(function() {
  var width = $(window).width();
  var height = $(window).height();
  $("p").text("浏览器窗口大小为：" + width + " x " + height);
});

以上代码会在浏览器窗口大小发生改变时，更新页面上的显示。

总结

jQuery 中的事件绑定和响应是前端开发中不可或缺的一部分。事件委托可以以更少的代码实现更好的性能，而常用的事件方法和扩展方法则能够简化代码编写，提高开发效率。本文介绍了 jQuery 的事件机制和相关的方法，希望能够帮助读者更加深入地了解 jQuery 的使用。

简洁易懂的jQuery：事件与jQuery