jQuery 事件基础

简介

欢迎来到 jQuery 文档！本实验将向你介绍 jQuery 事件。

jQuery 提供了简单的方法来为选中的元素附加事件处理程序。当事件发生时，所提供的函数将被执行。在函数内部，this 指向触发事件的 DOM 元素。

事件处理函数可以接收一个事件对象。该对象可用于确定事件的性质，并阻止事件的默认行为。

Skills Graph

在 DOM 元素上设置事件响应

VM 中已提供 index.html。

jQuery 使得在页面元素上设置事件驱动的响应变得很简单。这些事件通常由最终用户与页面的交互触发，例如在表单元素中输入文本或移动鼠标指针时。在某些情况下，如页面加载和卸载事件，浏览器本身会触发该事件。

jQuery 为大多数原生浏览器事件提供了便捷方法。这些方法 —— 包括 .click()、.focus()、.blur()、.change() 等 —— 是 jQuery 的 .on() 方法的简写形式。当你想要将同一个处理函数绑定到多个事件、想要向事件处理程序提供数据、处理自定义事件或者想要传递多个事件和处理程序的对象时，.on() 方法很有用。

// 使用便捷方法设置事件
$("p").click(function () {
  console.log("你点击了一个段落！");
});

// 使用 `.on()` 方法进行等效的事件设置
$("p").on("click", function () {
  console.log("click");
});

请点击右下角的“上线”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

将事件扩展到新的页面元素

需要注意的是，.on() 只能在设置监听器时已存在的元素上创建事件监听器。例如：

$(document).ready(function () {
  // 现在创建一个带有 alert 类的新按钮元素。
  $("<button class='alert'>Alert!</button>").appendTo(document.body);
  // 为执行该指令时 DOM 中存在的所有带有 alert 类的按钮元素设置点击行为
  $("button.alert").on("click", function () {
    console.log("一个带有 alert 类的按钮被点击了！");
  });
});

如果在设置事件监听器之后创建了类似的元素，它们不会自动获得你之前设置的事件行为。

你可以刷新“Web 8080”标签页来预览网页。

设置多个事件响应

在你的应用程序中，元素常常会绑定多个事件。如果多个事件要共享同一个处理函数，你可以将事件类型作为以空格分隔的列表提供给 .on()：

// 多个事件，同一个处理程序
$("div").on(
  "click change", // 为多个事件绑定处理程序
  function () {
    console.log("一个输入框被点击或更改了！");
  }
);

当每个事件都有自己的处理程序时，你可以将一个对象传入 .on()，该对象包含一个或多个键值对，键是事件名称，值是处理该事件的函数。

// 为多个事件绑定不同的处理程序
$("div").on({
  click: function () {
    console.log("被点击了！");
  },
  mouseover: function () {
    console.log("被悬停了！");
  }
});

你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了 jQuery 事件基础实验。要了解更多关于 jQuery API 的信息，请参阅官方的 jQuery 文档。