读jQuery之十一 添加事件核心方法

首先我们来看一下“读jQuery之十一 添加事件核心方法”的内容。

简介

在 jQuery 中，添加事件的方法有很多种。在这个系列中，我们将学习如何实现 jQuery 内部的 on 方法。通过学习该方法的实现，我们可以更加深入地了解事件处理和事件冒泡机制。

步骤

1. 获取所有需要添加事件的元素

实现 on 方法，最先要做的就是获取所有需要添加事件的元素。我们可以使用 jQuery 内部的选择器引擎，来获取到这些元素。这可以通过调用 Sizzle 引擎来实现。

var eventContainer = document.querySelectorAll(selector);

2. 为每个元素绑定事件

获取到每个元素之后，接下来我们需要为每个元素绑定事件。对于每个元素，我们都需要维护一个事件处理函数列表，以便在需要触发该元素的事件时，可以遍历该列表来执行对应的处理函数。

var events = {};

function addEvent(eventName, eventFunc) {
  events[eventName] = eventFunc;
}

function removeEvent(eventName) {
  delete events[eventName];
}

3. 触发事件

最后，我们需要实现在事件触发时，执行对应的事件处理函数列表。我们在其中需要考虑到事件冒泡机制的影响，即如果事件传播到父元素，则需要先执行父元素对应的事件处理函数，再依次顺序执行子元素对应的事件处理函数。针对这个问题，可以递归调用该元素所有祖先元素的事件处理函数。

function triggerEvent(eventName) {
  var target = this;
  while (target) {
    var eventFunc = events[eventName];
    if (eventFunc) {
      eventFunc.call(target, event);
    }
    target = target.parentNode;
  }
}

至此，我们就完成了一个简单的 on 方法的实现。我们现在可以通过以下方式来使用该方法：

$('selector').on('click', function() {
  // 事件处理函数
});

示例说明

示例一

假设我们有以下 HTML 代码：

<div class="wrapper">
  <button class="btn">Click me!</button>
</div>

我们可以使用以下代码来为按钮绑定点击事件：

$('.btn').on('click', function() {
  console.log('Button clicked!');
});

示例二

我们假设现在需要为一组 a 标签绑定点击事件，并防止事件冒泡。我们可以使用以下代码来实现：

$('a').on('click', function(event) {
  event.stopPropagation();
  console.log('Link clicked!');
});

希望以上内容可以对你有所帮助。