JavaScript 事件 Event

Question

在编程时系统内的发生的动作或者发生的事情— 系统会在事件出现的时候触发某种信号并且会提供一个自动加载某种动作（列如：运行一些代码）的机制，比如在一个机场，当一架将起飞的飞机的跑道清理完成后，飞行员会收到一个信号，结果是他们开始起飞。

在 Web 中, 事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口。

每个可用的事件都会有一个事件处理器（事件监听器），也就是事件触发时会运行的代码块。

当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。

网络事件不是 JavaScript 语言的核心——它们被定义成内置于浏览器的 JavaScript APIs。

1、使用网页事件的方式

事件处理器属性（存在于事件处理程序过程的属性中） var btn = document.querySelector('button');

btn.onclick = function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}

这个 onclick 是被用在这个情景下的事件处理器的属性，它就像 button 其他的属性（如 btn.textContent, or btn.style), 但是有一个特别的地方——当您将一些代码赋值给它的时候，只要事件触发代码就会运行。

也可以将一个有名字的函数赋值给事件处理参数 var btn = document.querySelector('button');

function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
btn.onclick = bgChange;

行内事件处理器 - 请勿使用（注释: 将您的编程逻辑与内容分离也会使您的站点对搜索引擎更加友好。）

<button onclick="bgChange()">Press me</button>
function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}

2、addEventListener() 和 removeEventListener()

这个函数和事件处理属性是类似的，但是语法略有不同

var btn = document.querySelector('button');
function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}   
btn.addEventListener('click', bgChange);

在 addEventListener() 函数中, 我们具体化了两个参数——我们想要将处理器应用上去的事件名称，和包含我们用来回应事件的函数的代码。注意将这些代码全部放到一个匿名函数中是可行的：

btn.addEventListener('click', function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
});

这个机制带来了一些相较于旧方式的优点。有一个相对应的方法，removeEventListener()，这个方法移除事件监听器。例如，下面的代码将会移除上个代码块中的事件监听器： btn.removeEventListener('click', bgChange);

这在简单个的、小型的项目中可能不是很有用，但是在大型的、复杂的项目中就非常有用了，可以非常高效地清除不用的事件处理器，另外在其他的一些场景中也非常有效——比如您需要在不同环境下运行不同的事件处理器，您只需要恰当地删除或者添加事件处理器即可

您也可以给同一个监听器注册多个处理器，下面这种方式不能实现这一点：

myElement.onclick = functionA;
myElement.onclick = functionB;

第二行会覆盖第一行，但是下面这种方式就会正常工作了：

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

当元素被点击时两个函数都会工作。

3、 我该使用哪种机制？

第三种机制（DOM Level 2 Events (addEventListener(), etc.)）的主要优点是，如果需要的话，可以使用 removeEventListener() 删除事件处理程序代码，而且如果有需要，您可以向同一类型的元素添加多个监听器。例如，您可以在一个元素上多次调用，addEventListener('click', function() { ... })，并可在第二个参数中指定不同的函数。对于事件处理程序属性来说，这是不可能的，因为后面任何设置的属性都会尝试覆盖较早的属性。

4、其他事件概念

事件对象：有时候在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。 这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。

function bgChange(e) {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
e.target.style.backgroundColor = rndCol; console.log(e);
}
btn.addEventListener('click', bgChange);

在这里，您可以看到我们在函数中包括一个事件对象，e 并在函数中设置背景颜色样式在 e.target 上 - 它指的是按钮本身。 事件对象 e 的 target 属性始终是事件刚刚发生的元素的引用。 所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。

当您要在多个元素上设置相同的事件处理程序时，e.target 非常有用，并且在发生事件时对所有元素执行某些操作。

例如，你可能有一组16块方格，当它们被点击时就会消失。用 e.target 总是能准确选择当前操作的东西（方格）并执行操作让它消失，而不是必须以更困难的方式选择它。 我们使用 JavaScript 创建了 16 个元素。接着我们使用 document.querySelectorAll() 选择全部的元素,然后遍历每一个,为每一个元素都添加一个onclick单击事件，每当它们点击时就会为背景添加一个随机颜色。

var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].onclick = function(e) {
e.target.style.backgroundColor = bgChange();
}
}

完整代码

<script>
for(var i = 1; i <= 16; i++) {
var myDiv = document.createElement('div');
document.body.appendChild(myDiv);
}
function random(number) {
return Math.floor(Math.random()*number);
}
function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; return rndCol;
}
var divs = document.querySelectorAll('div');
for(var i = 0; i < divs.length; i++) {
divs[i].onclick = function(e) {
e.target.style.backgroundColor = bgChange();
}
}
</script>

阻止默认行为

• 最常见的例子是Web表单，例如自定义注册表单。 当你填写详细信息并按提交按钮时，自然行为是将数据提交到服务器上的指定页面进行处理，并将浏览器重定向到某种“成功消息”页面（或 相同的页面，如果另一个没有指定。）
• 当用户没有正确提交数据时，麻烦就来了 - 作为开发人员，你希望停止提交信息给服务器，并给他们一个错误提示，告诉他们什么做错了，以及需要做些什么来修正错误。 一些浏览器支持自动的表单数据验证功能，但由于许多浏览器不支持，因此建议你不要依赖这些功能，并实现自己的验证检查。 我们来看一个简单的例子。

<form> <div> <label for="fname">First name: </label>
<input type="text"> </div> <div>
<label for="lname">Last name: </label>
<input type="text"> </div> <div>
<input type="submit"> </div> </form>
<p></p>

这里我们用一个 onsubmit 事件处理程序（在提交的时候，在一个表单上发起 submit 事件）来实现一个非常简单的检查，用于测试文本字段是否为空。 如果是，我们在事件对象上调用 preventDefault() 函数，这样就停止了表单提交，然后在我们表单下面的段落中显示一条错误消息，告诉用户什么是错误的：

var form = document.querySelector('form');
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var submit = document.getElementById('submit');
var para = document.querySelector('p');
form.onsubmit = function(e) {
if (fname.value === '' || lname.value === '') {
e.preventDefault();
para.textContent = 'You need to fill in both names!';
}
}

显然，这是一种非常弱的表单验证——例如，用户输入空格或数字提交表单，表单验证并不会阻止用户提交——这不是我们例子想要达到的目的。

5、事件冒泡及捕获

事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。

比如有个父元素的事件（比如点击隐藏）,然后 子元素是（点击播放）, 当点击播放的时候，也会触发了隐藏事件。要解决的话 可以在子元素的事件里加上 stopPropagation(）来解决。

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此，在我们当前的示例中，当您单击视频时，这个单击事件从 元素向外冒泡直到元素。沿着这个事件冒泡线路：

• 它发现了 video.onclick... 事件处理器并且运行它，因此这个视频第一次开始播放。
• 接着它发现了（往外冒泡找到的） videoBox.onclick... 事件处理器并且运行它，因此这个视频也隐藏起来了。

1、对事件冒泡和捕捉的解释

当一个事件发生在具有父元素的元素上(例如，在我们的例子中是元素)时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。 在捕获阶段：

• 浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个 onclick 事件处理程序，如果是，则运行它。
• 然后，它移动到中的下一个元素，并执行相同的操作，然后是下一个元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反:

• 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个 onclick 事件处理程序，如果是，则运行它。
• 然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素。

2、用 stopPropagation() 修复问题

标准事件对象具有可用的名为 stopPropagation() 的函数, 当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行(不会向上冒泡)。

所以，我们可以通过改变前面代码块中的第二个处理函数来解决当前的问题: video.onclick = function(e) { e.stopPropagation(); video.play(); };

注解: 为什么我们要弄清楚捕捉和冒泡呢？那是因为，在过去糟糕的日子里，浏览器的兼容性比现在要小得多，Netscape（网景）只使用事件捕获，而 Internet Explorer 只使用事件冒泡。当 W3C 决定尝试规范这些行为并达成共识时，他们最终得到了包括这两种情况（捕捉和冒泡）的系统，最终被应用在现在浏览器里。

注解: 如上所述，默认情况下，所有事件处理程序都是在冒泡阶段注册的，这在大多数情况下更有意义。如果您真的想在捕获阶段注册一个事件，那么您可以通过使用 addEventListener() 注册您的处理程序，并将可选的第三个属性设置为 true。

3、事件委托

冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并将事件监听器气泡的影响设置为每个子节点，而不是每个子节点单独设置事件监听器。

一个很好的例子是一系列列表项，如果你想让每个列表点击时弹出一条信息，您可以将click单击事件监听器设置在父元素 上，它将会冒泡到列表项上。