概述

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。在 JavaScript 中，有三种常用的绑定事件的方法：

  1. 在 DOM 元素中直接绑定；
  2. 在 JavaScript 代码中绑定；
  3. 绑定事件监听函数。

在 DOM 元素中直接绑定

  1. 绑定原生函数
<input onclick="alert('alert')" type="button" value="点击我，弹出alert" />
  1. 绑定自定义函数
<input onclick="myAlert()" type="button" value="点击我，弹出alert" />
<script type="text/javascript">
  function myAlert() {
    alert("alert");
  }
</script>

在 JavaScript 代码中绑定

<input id="demo" type="button" value="点击我，显示 type 属性" />
<script type="text/javascript">
  document.getElementById("demo").onclick = function () {
    alert(this.getAttribute("type")); //  this 指当前发生事件的HTML元素，这里是<div>标签
  };
</script>

通过 getElement 获取指定 Dom 元素，然后绑定一个事件，这样使 javascript 代码和 HTML 标签分离，文档结构更加清晰，便于管理和开发。

绑定事件监听函数

这种方式是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

语法：element.addEventListener(event, handle, useCapture)

参数值：

参数 描述
event 必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
handle 必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值:true,事件句柄在捕获阶段执行。false,默认，事件句柄在冒泡阶段执行。

attachEvent()函数语法：element.attachEvent(eventName,handle)

参数 说明
eventName 事件名称。注意，与 addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick 等。
handle 事件句柄函数，即用来处理事件的函数。

注意：

addEventListener()是标准的绑定事件监听函数的方法，是 W3C 所支持的，Chrome、FireFox、Opera、Safari、IE9.0 及其以上版本都支持该函数；
但是，IE8.0 及其以下版本不支持该方法，它使用 attachEvent()来绑定事件监听函数。
所以，这种绑定事件的方法必须要处理浏览器兼容问题。如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。

以下实例演示了跨浏览器的解决方法：

function addEvent(obj, type, handle) {
  try {
    // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    obj.addEventListener(type, handle, false);
  } catch (e) {
    try {
      // IE8.0及其以下版本
      obj.attachEvent("on" + type, handle);
    } catch (e) {
      // 早期浏览器
      obj["on" + type] = handle;
    }
  }
}
function handle() {
  //这里写绑定事件的动作代码
}

这里使用 try{ … } catch(e){ … } 代替 if … else… 语句，避免浏览器出现错误提示。

参考