网页中事件绑定的三种方式

在web中，事件在浏览器窗口中被触发的并且通常被绑定到窗口内部的特定部分-可能是一个元素、一系列元素、被加载到这个窗口的HTML代码或者整个浏览器窗口。举几个可能发生的不同事件：

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

如果想查看更多的事件，可以到MDN Event reference 进一步了解学习

使用网页事件的三种方式：

我们可以通过不同的方法将事件侦听器代码添加到网页，以便在关联的事件被触发的时候运行它。

• 事件处理器属性：

  var btn = document.querySelector('btn');
  btn.onclick = function(){
      alert( 'hello world' )
  } 

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

  也可以将一个有名字的函数赋值给事件处理参数。

  var _alert = function(){
      alert('hello world')
  }
  var btn = document.querySelector('button');
  
  btn.onclick = _alert

• 行内事件处理器：（不建议使用）

  <button onclick="alert('hello world')"> click me </button>

  这web上注册事件处理程序最早方式是类似于上面所示的事件处理程序HTML属性(也称为内联事件处理程序) —— 属性值实际上是当事件发生时要运行的javaScript代码。

• 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);

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

  此外，该事件机制还提供了许多其他强大的特性和选项。这对于本文来说有点超出范围，但是如果您想要阅读它们，请查看addEventListener()和removeEventListener()参考页面。

[2]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
[3]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener