JavaScript的事件

发表于 10月以前 | 总阅读数：369 次

本文作者系360奇舞团前端开发工程师

概述

在 Web 开发中，事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分，事件绑定的可能是一个元素、一系列元素或者是整个浏览器窗口。举几个可能发生的事件：

用户在某个元素上点击鼠标或悬停光标。
用户在键盘中按下某个按键。
用户调整浏览器的大小或者关闭浏览器窗口。
一个网页停止加载。
提交表单。
播放、暂停、关闭视频。

事件处理器

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

这里通过一个简单的例子来概况一下事件处理器的概念

e.g

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Event Demo</title>
  </head>

  <body>
    <button>press me</button>
  </body>

  <script>
    const btn = document.querySelector("button");
    function clickBtn() {
      alert("点击了按钮");
    }
    btn.onclick = clickBtn;

  </script>

</html>

上面script代码先使用Document.querySelector() 函数获取button元素，然后使用 btn 变量存储 button，然后定义了一个事件处理器函数，最后将函数（弹窗函数）赋值给“点击”事件处理器参数，监听“点击”这个事件。只要点击事件在<button>元素上触发，事件处理器代码块就会被执行。即每当用户点击它时，都会运行此段代码。

触发网页事件的方式

内联事件处理器

<button onclick="clickBtn()" >press me</button>

最早在 Web 上注册事件处理程序的方法是类似于上面所示的事件处理程序 HTML 属性，属性值实际上是当事件发生时要运行的 JavaScript 代码。上面的例子调用的事件处理程序在script模块，但也可以直接在属性内插入 JavaScript，例如：

<button onclick="alert('点击了按钮')" >press me</button>

类似HTML 属性等价于事件处理器属性的方法不推荐使用，因为使用一个事件处理属性似乎看起来很简单，但很快就变得难以管理和效率低下。

首先不应该混用 HTML 和 JavaScript，违背了职责分离的原则，会导致文档很难解析，最好的办法是只在一块地方写 JavaScript 代码。

即使在单一文件中，内置事件处理器也不是一个好主意。一个按钮看起来还好，但是如果有一百个按钮呢？您得在文件中加上 100 个属性。这很快就会成为维护人员的噩梦。使用 JavaScript，您可以给网页中的 button 很方便的都加上事件处理器。就像下面这样：

const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = clickBtn;
}

另外将编程逻辑与内容分离也会让您的站点对搜索引擎更加友好。

事件处理器属性

const btn = document.querySelector("button");
function clickBtn() {
  alert("点击了按钮");
}
btn.onclick = clickBtn;

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

有很多事件处理参数可供选择，比如

btn.ondblclick——用于按钮被双击时触发。
btn.onmouseover——在鼠标移入按钮上方时触发
和 btn.onmouseout— 在鼠标从按钮移出时触发。
btn.onfocus及btn.onblur— 在按钮被置于焦点或失去焦点时触发。

一些事件非常通用，几乎在任何地方都可以用（比如 onclick 几乎可以用在几乎每一个元素上），然而另一些元素就只能在特定场景下使用，比如我们只能在 video 元素上使用 onplay 。

addEventListener() 和 removeEventListener()

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

const btn = document.querySelector("button");

btn.addEventListener('click',(ev)=>{
  alert("点击了按钮");
})

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

btn.removeEventListener('click', bgChange);

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

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

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

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

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

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

该使用哪种机制

在三种机制中，绝对不应该使用内联事件处理器，内联方式严重违背了HTML和JavaScript职责分离的原则。

另外两种是相对可互换的，至少对于简单的用途：

事件处理器属性具有更好的跨浏览器兼容性 (在 Internet Explorer 8 的支持下)。
addEventListener()更强大，但是支持不足（IE9以上才可以使用）。

addEventListener()的主要优点是可以使用removeEventListener()删除事件处理程序代码，而且如果有需要，您可以向同一类型的元素添加多个监听器。例如，您可以在一个元素上多次调用addEventListener('click', function() { ... })。对于事件处理器属性来说，这是不可能的，因为后面任何设置的属性都会覆盖较早的属性。

其他事件概念

阻止默认行为

有时，你会遇到一些情况，你希望事件不执行它的默认行为。最常见的例子是 Web 表单，例如自定义注册表单。当你填写详细信息并按提交按钮时，自然的行为是将数据提交到服务器上的指定页面进行处理，并将浏览器重定向到某种“成功消息”页面

当用户没有正确提交数据时，你希望停止提交信息给服务器，并给他们一个错误提示，告诉他们什么做错了，以及需要做些什么来修正错误。一些浏览器支持自动的表单数据验证功能，但由于许多浏览器不支持，因此建议你不要依赖这些功能，还是要实现自己的验证检查。我们来看一个简单的例子。

首先，一个简单的 HTML 表单，需要你填入名（first name）和姓（last name）

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

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

const form = document.querySelector('form');
const name = document.getElementById('nickName');
const pa = document.getElementById('password');
const para = document.querySelector('p');

form.onsubmit = function(e) {
  if (name.value === '' || pa.value === '') {
    e.preventDefault();
    para.textContent = 'Please enter the user name and password!';
  }
}

显然，这是一种非常弱的表单验证——例如，用户输入空格或数字提交表单，表单验证并不会阻止用户提交

事件冒泡和事件捕获

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

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

在冒泡阶段，恰恰相反：

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

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。

用 stopPropagation() 阻止冒泡

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

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

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

冒泡还是捕获？

对于事件代理来说，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。

事件委托

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

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

e.g

<ul class="animal_list">        
    <li>pig</li>        
    <li>dog</li>        
    <li>cat</li>        
    <li>chicken</li>        
    <li>duck</li>           
</ul>
<div class="box"></div>

在点击每个 li 标签时，输出li当中的动物名（innerHTML） 。常规做法是遍历每个 li ,然后在每个 li 上绑定一个点击事件：

var animal_list=document.querySelector(".animal_list");            
var animals=color_list.getElementsByTagName("li");            
var box=document.querySelector(".box");            
for(var n=0;n<colors.length;n++){                
    colors[n].addEventListener("click",function(){                    
        console.log(this.innerHTML)                    
        box.innerHTML="选择的动物为 "+this.innerHTML;                
    })            
}

这种做法在 li 较少的时候可以使用，但如果有一万个 li ，那就会导致性能降低。

这时就需要事件代理出场了，利用冒泡事件流的特性，我们只绑定一个事件处理函数也可以完成：

function animalChange(e){                
    var e=e||window.event;//兼容性的处理         
    if(e.target.nodeName.toLowerCase()==="li"){                    
        box.innerHTML="选择的动物为 "+e.target.innerHTML;                
    }                            
}            
color_list.addEventListener("click",colorChange,false)

由于事件冒泡机制，点击了 li 后会冒泡到 ul ，此时就会触发绑定在 ul 上的点击事件，再利用 target 找到事件实际发生的元素，就可以达到预期的效果。

使用事件代理的好处不仅在于将多个事件处理函数减为一个，而且对于不同的元素可以有不同的处理方法。假如上述列表元素当中添加了其他的元素节点（如：a、span等），我们不必再一次循环给每一个元素绑定事件，直接修改事件代理的事件处理函数即可。