JavaScript事件处理：深入理解this关键字及事件处理机制

高效的客户端Web应用离不开JavaScript事件处理机制。事件允许JavaScript侦测用户行为，例如鼠标悬停、点击链接、页面滚动、窗口大小调整、拖拽对象等等。 你的JavaScript代码可以注册一个事件处理函数，在特定事件发生时触发。大多数浏览器会向该函数传递一个包含事件信息的单一对象，例如按键信息、鼠标光标位置等。然后，你可以执行某些操作，例如动画元素、发起Ajax请求或阻止浏览器的默认行为。此外，this关键字也可能被设置。通常情况下，this指向触发事件的元素，但并非总是如此。

避免使用内联事件处理程序

内联事件处理程序（例如click me）虽然简单，但存在诸多缺点：它们限制性强，笨拙且会使HTML代码膨胀。由于事件调用和处理程序定义在不同位置，因此维护起来很复杂。最后，由于页面加载时可能调用事件，因此脚本标签必须放置在HTML顶部，而不是底部。

传统DOM0事件

传统事件处理方法（例如link.onclick = EventHandler;）虽然简单直接，但每个事件类型只能分配一个处理程序。 注意：不要使用link.onclick = EventHandler();，这会立即执行EventHandler函数，并将返回值（undefined）赋值给#link节点的onclick属性。这不会报错，但你的处理程序在点击事件发生时将永远不会被调用。

现代DOM2事件

现代事件处理允许为同一事件指定多个处理程序。然而，由于微软和W3C在实现上存在一些分歧，只有IE9及以上版本支持addEventListener()。我们可以使用对象检测创建一个跨浏览器事件附加函数：

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

与DOM0事件类似，所有浏览器都将this设置为触发事件的元素……除了IE8及以下版本。在IE8及以下版本中，this始终是全局window对象。幸运的是，我们可以从事件对象中确定目标元素：

function EventHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

JavaScript事件处理程序中this关键字的意义

this关键字指的是函数被调用的上下文。在事件处理程序中，this通常指向附加事件处理程序的HTML元素。这允许你直接访问和操作元素。

如何在事件处理程序中使用this

使用this很简单，就像使用其他变量一样。记住，this指向附加事件处理程序的HTML元素。

JavaScript中的不同事件类型

JavaScript支持多种事件，例如click、mouseover、mouseout、keydown、keyup、load和unload。

如何将事件处理程序附加到元素

可以使用addEventListener方法将事件处理程序附加到元素。该方法接受两个参数：要监听的事件名称和事件发生时要运行的函数。

JavaScript中的Event对象

Event对象是在事件发生时创建的特殊对象。该对象包含有关事件的信息，例如事件类型、目标元素、事件发生时间等。你可以在事件处理程序函数中访问Event对象。