jquery_ref_events

jQuery 事件处理

现代 jQuery 事件方法

jQuery 提供了强大且一致的方式来处理浏览器事件。现代 jQuery 中用于事件处理的主要方法是 .on() 用于附加处理程序，以及 .off() 用于移除它们。

较旧的方法如 .bind()、.delegate()、.live() 和 .die() 已被弃用，不应在新代码中使用。.on() 方法提供了这些较旧方法的所有功能。

关键方法与概念：

方法 / 属性	描述
.on()	为选定的元素附加一个或多个事件处理程序。这是所有事件处理的推荐方法，支持直接事件和委托事件。
.off()	移除之前使用 .on() 附加的事件处理程序。
.one()	附加一个事件处理程序，该处理程序在每个元素上每种事件类型最多运行一次。
.trigger()	为给定事件类型执行附加到匹配元素上的所有处理程序和行为。
.triggerHandler()	为事件执行附加到元素上的所有处理程序，但不触发默认操作或冒泡到 DOM 树。
Shorthand Methods	像 .click()、.hover()、.submit()、.focus()、.blur()、.keydown() 等方法是 .on('click', ...)、.on('mouseenter mouseleave', ...) 等的简写形式。它们很方便，但在内部使用 .on()。
Event Object Properties	提供关于事件的信息。
event.preventDefault()	阻止事件的默认行为（例如，点击链接跳转、提交表单）。
event.stopPropagation()	阻止事件在 DOM 树中冒泡，停止父元素接收事件通知。
event.stopImmediatePropagation()	阻止事件冒泡，同时也阻止同一元素上的任何其他处理程序执行。
event.target	触发事件的 DOM 元素。
event.currentTarget	当前附加事件处理程序的 DOM 元素（在事件冒泡中相关）。
event.delegateTarget	附加当前调用的 jQuery 事件处理程序的元素（在委托事件中有用）。
event.type	描述事件的性质（例如，‘click’）。
event.pageX / event.pageY	鼠标相对于文档左上角的位置。
event.which	指示按下了哪个具体的键或按钮。
event.data	在绑定当前执行的处理程序时传递给事件方法的可选数据对象。
event.namespace	触发事件时指定的命名空间（用于 .off() 目标选择时有用）。
event.result	由该事件触发的事件处理程序返回的最后一个值。
event.timeStamp	事件发生的时间（自 1970 年 1 月 1 日以来的毫秒数）。
event.relatedTarget	在鼠标事件（如 mouseenter/mouseleave）中，指示正在进入或离开的元素。
event.isDefaultPrevented()	返回是否调用了 event.preventDefault()。
event.isPropagationStopped()	返回是否调用了 event.stopPropagation()。
event.isImmediatePropagationStopped()	返回是否调用了 event.stopImmediatePropagation()。
Deprecated/Removed Methods	（不应使用）.bind()、.unbind()、.delegate()、.undelegate()、.live()、.die()、.error()、.load()、.unload()、.toggle()（事件版本）。

使用 .on() 进行事件委托

事件委托允许你将单个事件监听器附加到父元素上，该监听器将对在其后代（匹配选择器）上触发的事件做出响应，包括在监听器附加之后添加的后代。这种方式高效，并且对于动态内容非常有用。

// 示例：处理 #myList 元素内列表项的点击事件
// 即使之后添加了新的 <li> 元素，这也仍然有效。
$('#myList').on('click', 'li', function() {
  console.log('Clicked on:', $(this).text());
});

有关每个方法和事件属性的详细解释和示例，请参阅官方的 jQuery 文档。