jQuery事件对象

3,218字

14–20 分钟

当jQuery事件处理函数被调用时，jQuery会传递一个标准化的事件对象作为参数。这个封装后的jQuery事件对象在不同浏览器中保持一致的属性和方法，消除了原生事件对象的浏览器差异。jQuery事件对象提供了访问事件信息和控制事件传播的能力，是交互功能开发的核心工具。

事件对象的常用属性

event.target

event.target属性指向实际触发事件的原始元素。在事件委托场景中，该属性始终指向事件起源的DOM元素，而非事件绑定的元素。

语法

$(selector).on('event', function(event) {
  var originElement = event.target;
});

示例：event.target应用

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="list">
  <li>项目一</li>
  <li>项目二</li>
</ul>
<script>
$('#list').on('click', function(event) {
  console.log('触发元素:', event.target.tagName);
});
</script>
</body>
</html>

event.currentTarget

event.currentTarget属性指向当前执行事件处理函数的元素。该属性与this关键字指向相同，在事件委托中特别有用。

语法

$(selector).on('event', function(event) {
  var currentElement = event.currentTarget;
});

event.type

event.type属性返回触发事件的类型名称，例如”click”、”mouseover”或”keydown”等字符串值。

语法

$(selector).on('event', function(event) {
  var eventType = event.type;
});

event.timeStamp

event.timeStamp属性记录事件发生的时间戳，单位为毫秒，从1970年1月1日开始计算。

语法

$(selector).on('event', function(event) {
  var timestamp = event.timeStamp;
});

event.which

event.which属性返回键盘事件的按键代码或鼠标事件的按键标识。对于键盘事件返回ASCII码，鼠标左键返回1，中键返回2，右键返回3。

语法

$(selector).on('keydown', function(event) {
  var keyCode = event.which;
});

事件对象的常用方法

event.preventDefault()

event.preventDefault()方法阻止浏览器执行与事件关联的默认行为。如表单提交、链接跳转或右键菜单等默认操作可通过此方法取消。

语法

$(selector).on('event', function(event) {
  event.preventDefault();
});

示例：阻止默认行为

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a id="link" href="https://example.com">阻止跳转的链接</a>
<script>
$('#link').on('click', function(event) {
  event.preventDefault();
  console.log('链接点击被阻止');
});
</script>
</body>
</html>

event.stopPropagation()

event.stopPropagation()方法阻止事件在DOM树中向上冒泡传播。调用后事件不会触发任何父元素上绑定的同类型事件处理程序。

语法

$(selector).on('event', function(event) {
  event.stopPropagation();
});

event.stopImmediatePropagation()

event.stopImmediatePropagation()方法不仅阻止事件冒泡，还会阻止当前元素上其它同类型事件处理函数的执行。该方法比stopPropagation()具有更强的阻断能力。

语法

$(selector).on('event', function(event) {
  event.stopImmediatePropagation();
});

事件委托中的事件对象

在事件委托模式中，jQuery事件对象特别重要。通过event.target可准确识别实际触发事件的子元素，而event.currentTarget指向绑定事件处理程序的父容器元素。

示例：事件委托应用

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
  <button class="btn">按钮A</button>
  <button class="btn">按钮B</button>
</div>
<script>
$('#container').on('click', '.btn', function(event) {
  console.log('触发元素:', event.target.textContent);
  console.log('委托元素:', event.currentTarget.id);
});
</script>
</body>
</html>

事件对象综合应用

以下示例展示jQuery事件对象属性和方法的组合使用场景：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="myForm">
  <input type="text" id="inputField">
  <button type="submit">提交</button>
</form>
<script>
$('#myForm').on('submit', function(event) {
  event.preventDefault();
  console.log('表单提交阻止');
});

$('#inputField').on('keydown', function(event) {
  console.log('按键代码:', event.which);
  if(event.which === 13) {
    event.stopPropagation();
  }
});
</script>
</body>
</html>