Web 开发中最常见的任务之一是事件管理。我们的 JavaScript 代码通常监听 DOM 元素调度的事件。
这就是我们从用户那里获取信息的方式：也就是说，他或她点击、打字、与我们的页面交互，我们需要知道这种情况是否发生。添加事件监听器看起来很简单，但可能是一个艰难的过程。
在本文中，我们将看到一个真实的案例问题及其 1.6K 解决方案。
问题
我的一个朋友是一名初级开发人员。因此，他对普通 JavaScript 没有太多经验；然而，他不得不开始使用 AngularJS 和 Ember 等框架，而对 DOM 与 JavaScript 的关系没有基本的了解。在担任初级开发人员期间，他负责一个小项目：一个几乎不涉及 JavaScript 的单页活动网站。他遇到了一个小但非常有趣的问题，最终促使我编写了 Bubble.js。
假设我们有一个弹出窗口。一个样式漂亮的 元素：
...
这是我们用来显示消息的代码：
var popup = document.querySelector('.popup');
var showMessage = function(msg) {
popup.style.display = 'block';
popup.innerHTML = msg;
}
...
showMessage('Loading. Please wait.');
我们还有另一个函数 hideMessage ，它将 display 属性更改为 none 并隐藏弹出窗口。该方法可能适用于最一般的情况，但仍然存在一些问题。
例如，如果问题一一出现，我们需要实现额外的逻辑。假设我们必须向弹出窗口的内容添加两个按钮 - 是和否。
var content = 'Are you sure?
'; content += 'Yes'; content += 'No'; showMessage(content);
那么，我们如何知道用户点击了它们呢？我们必须为每个链接添加事件侦听器。
例如：
var addListeners = function(yesCB, noCB) {
popup.querySelector('.popup--yes').addEventListener('click', yesCB);
popup.querySelector('.popup--no').addEventListener('click', noCB);
}
showMessage(content);
addListeners(function() {
console.log('Yes button clicked');
}, function() {
console.log('No button clicked');
});
上面的代码在第一次运行时有效。如果我们需要一个新按钮怎么办，或者更糟糕的是，如果我们需要不同类型的按钮怎么办？也就是说，如果我们继续使用 元素但使用不同的类名会怎么样？我们不能使用相同的 addListeners 函数，并且为弹出窗口的每个变体创建一个新方法很烦人。
以下是问题显而易见的地方：
- 我们必须一次又一次地添加监听器。事实上，每次弹出窗口的
中的 HTML 发生更改时，我们都必须执行此操作。 - 仅当弹出窗口的内容更新时，我们才能附加事件侦听器。仅在
showMessage调用之后。我们必须始终考虑这一点并同步两个流程。 - 添加侦听器的代码有一个硬依赖项 -
popup变量。我们需要调用它的querySelector函数，而不是document.querySelector。否则，我们可能会选择错误的元素。 - 一旦我们更改消息中的逻辑，我们就必须更改选择器，并且可能还更改
addEventListener调用。它一点也不干。
必须有更好的方法来做到这一点。
是的，有更好的方法。不，解决方案不是使用框架。
在揭晓答案之前，我们先来谈谈 DOM 树中的事件。
了解事件处理
事件是网络开发的重要组成部分。它们为我们的应用程序添加了交互性，并充当业务逻辑和用户之间的桥梁。每个 DOM 元素都可以调度事件。我们所要做的就是订阅这些事件并处理接收到的Event对象。
有一个术语“事件传播”，它代表“事件冒泡”和“事件捕获”，这两者都是 DOM 中事件处理的两种方式。让我们使用以下标记来看看它们之间的区别。
我们将把 click 事件处理程序附加到这两个元素。不过，因为互相嵌套，所以他们都会收到 click 事件。
document.querySelector('.wrapper').addEventListener('click', function(e) {
console.log('.wrapper clicked');
});
document.querySelector('a').addEventListener('click', function(e) {
console.log('a clicked');
});
按下链接后，我们会在控制台中看到以下输出：
a clicked .wrapper clicked
因此，这两个元素确实都接收了 click 事件。首先是链接，然后是 。这就是冒泡效果。从最深的元素到它的父母。有一种方法可以阻止冒泡。每个处理程序都会接收一个具有 stopPropagation 方法的事件对象：
document.querySelector('a').addEventListener('click', function(e) {
e.stopPropagation();
console.log('a clicked');
});
通过使用 stopPropagation 函数，我们表明该事件不应发送给父级。
有时我们可能需要颠倒顺序并让外部元素捕获事件。为此，我们必须在 addEventListener 中使用第三个参数。如果我们传递 true 作为值，我们将进行事件捕获。例如：
document.querySelector('.wrapper').addEventListener('click', function(e) {
console.log('.wrapper clicked');
}, true);
document.querySelector('a').addEventListener('click', function(e) {
console.log('a clicked');
}, true);
这就是我们与页面交互时浏览器处理事件的方式。
程序介绍：程序采用.net 2.0进行开发，全自动应用淘客api，自动采集信息，无需，手工更新，源码完全开放。（程序改进 无需填入阿里妈妈淘客API 您只要修改app_code文件下的config.cs文件中的id为你的淘客id即可）针对淘客3/300毫秒的查询限制，系统采用相应的解决方案，可以解决大部分因此限制带来的问题；程序采用全局异常，避免偶尔没考虑到的异常带来的问题；程序源码全部开放，请使
解决方案
好吧，那么我们为什么要在文章中花一部分时间讨论冒泡和捕获呢？我们提到它们是因为冒泡是弹出窗口问题的答案。我们不应该将事件监听器设置为链接，而是直接设置为 。
var content = 'Are you sure?
'; content += 'Yes'; content += 'No'; var addListeners = function() { popup.addEventListener('click', function(e) { var link = e.target; }); } showMessage(content); addListeners();
通过遵循这种方法，我们消除了开头列出的问题。
- 只有一个事件监听器，我们只添加一次。无论我们在弹出窗口中放入什么，事件的捕获都会在其父级中发生。
- 我们不受附加内容的约束。换句话说，我们不关心
showMessage何时被调用。只要popup变量处于活动状态，我们就会捕获事件。 - 因为我们调用了
addListeners一次，所以我们也使用了popup变量一次。我们不必保留它或在方法之间传递它。 - 我们的代码变得灵活，因为我们选择不关心传递给
showMessage的 HTML。我们可以访问被点击的锚点，因为e.target指向被按下的元素。
上面的代码比我们一开始的代码要好。然而，仍然无法以同样的方式发挥作用。正如我们所说， e.target 指向点击的 标签。因此，我们将使用它来区分是和否按钮。
var addListeners = function(callbacks) {
popup.addEventListener('click', function(e) {
var link = e.target;
var buttonType = link.getAttribute('class');
if(callbacks[buttonType]) {
callbacks[buttonType](e);
}
});
}
...
addListeners({
'popup--yes': function() {
console.log('Yes');
},
'popup--no': function() {
console.log('No');
}
});
我们获取了 class 属性的值并将其用作键。不同的类指向不同的回调。
但是，使用 class 属性并不是一个好主意。它保留用于将视觉样式应用于元素，并且其值可能随时更改。作为 JavaScript 开发人员，我们应该使用 data 属性。
var content = 'Are you sure?
'; content += 'Yes'; content += 'No';
我们的代码也变得更好了。我们可以删除 addListeners 函数中使用的引号：
addListeners({
yes: function() {
console.log('Yes');
},
no: function() {
console.log('No');
}
});
结果可以在这个 JSBin 中看到。
泡泡.js
我在几个项目中应用了上面的解决方案，因此将其包装为一个库是有意义的。它称为 Bubble.js，可在 GitHub 中找到。这是一个 1.6K 的文件，它的作用与我们上面所做的完全一样。
让我们将弹出示例转换为使用 Bubble.js。我们必须更改的第一件事是使用的标记：
var content = 'Are you sure?
'; content += 'Yes'; content += 'No';
我们应该使用 data-bubble-action 而不是 data-action。
一旦我们在页面中包含 bubble.min.js ，我们就有了一个全局 bubble 函数。它接受 DOM 元素选择器并返回库的 API。 on 方法是添加监听器的方法：
bubble('.popup')
.on('yes', function() {
console.log('Yes');
})
.on('no', function() {
console.log('No');
});
还有一种替代语法：
bubble('.popup').on({
yes: function() {
console.log('Yes');
},
no: function() {
console.log('No');
}
});
默认情况下，Bubble.js 侦听 click 事件，但有一个选项可以更改该设置。让我们添加一个输入字段并监听其 keyup 事件：
JavaScript 处理程序仍然接收 Event 对象。因此，在这种情况下，我们可以显示字段的文本：
bubble('.popup').on({
...
input: function(e) {
console.log('New value: ' + e.target.value);
}
});
有时我们需要捕获同一元素发出的多个事件而不是一个。 data-bubble-action 接受以逗号分隔的多个值：
在此处查找 JSBin 中的最终变体。
后备
本文提供的解决方案完全依赖于事件冒泡。在某些情况下 e.target 可能不会指向我们需要的元素。
例如：
如果我们将鼠标放在“choose”上并执行单击，则调度事件的元素不是 标记，而是 span 元素。
摘要
诚然，与 DOM 的通信是我们应用程序开发的重要组成部分，但我们使用框架只是为了绕过这种通信是一种常见的做法。
我们不喜欢一次又一次地添加监听器。我们不喜欢调试奇怪的双事件触发错误。事实上，如果我们了解浏览器的工作原理，我们就能够消除这些问题。
Bubble.js 只是几个小时阅读和一小时编码的结果 - 它是我们针对最常见问题之一的 1.6K 解决方案。
