JS DOM 绑定的三种方法

在JavaScript中，有三种常用的绑定事件的方法：

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

在 DOM 元素中直接绑定

<input  onclick="bind()"  type="button"  value="DOM绑定" />  <script type="text/javascript">    function bind(){      alert("DOM 元素中绑定");    }  </script>  

---

在 JavaScript 代码中绑定

elementObject.onXXX=function(){    // 事件处理代码}

---

绑定事件监听函数

用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

---

语法：elementObject.addEventListener(eventName,handle,useCapture);

参数 说明 elementObject DOM对象（即DOM元素） eventName 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等 handle 事件句柄函数，即用来处理事件的函数 useCapture Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念

---

语法：elementObject.attachEvent(eventName,handle);

参数 说明 elementObject DOM对象（即DOM元素） eventName 事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等 handle 事件句柄函数，即用来处理事件的函数

注意：事件句柄函数是指“ 函数名 ”，不能带小括号。

addEventListener() 是标准的绑定事件监听函数的方法，是 W3C 所支持的，Chrome、FireFox、Opera、Safari、IE9.0 及其以上版本都支持该函数；但是，IE8.0 及其以下版本不支持该方法，它使用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;          }      }  }  

// 例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：addEvent(document.getElementById("demo"),"click",myAlert);function myAlert(){    alert("又是一个警告框");}

参考文章：JavaScript绑定事件的方法[3种]