[JS事件] JS动态添加事件的几种方法

JS动态添加事件的几种方法（下面的div2是一个DIV）：

第一种：
div2.setAttribute("onmouseover", "this.style.backgroundColor='blue'");
div2.setAttribute("onmouseout","this.style.backgroundColor='"+spanColor+"'");
div2.setAttribute("onmousedown","alert('dd')");   //这种方法添加事件只在FF下面有效，IE下无效
第二种：
div2.onmousedown=function()
  {
   GoSearch(this.id);
  }
  div2.onmouseout=function()
  {
   this.style.backgroundColor=spanColor;
  }  //这种方法在IE和火狐下面都有效   在这里this代表的是div2

第三种：
div2.onmouseover=MouseOver;
function MouseOver()
{
 this.style.backgroundColor='blue';//JS中的this真的很特别,这里代表事件传进来的DIV对象
}

第四种：
div1.onmouseover=obj.attachEvent?obj.attachEvent("onblur",HideDiv):obj.addEventListener("onblur",HideDiv,"");
//这种方法兼容IE和FF。。obj.attachEvent这个在IE下有效，obj.addEventListener这个在FF下面有效。HideDiv是相关函数名

 

1、直接写函数：

<script language="javascript">
document.getElementById("result").onclick=function(){document.getElementById("result").innerText="动态添加事件";};
</script>

 

2、使用attachEvent

<script language="javascript">
      function aEvent() {
           var oBtn = document.all['oBtn'];
           oBtn.attachEvent('onclick', sText);
      }

      function dEvent() {
           var oBtn = document.all['oBtn'];
           oBtn.detachEvent('onclick', sText);           
      }

      function sText() {
           window.alert('看到效果了吗^^');
      }
</script>
<button id="oBtn">点击我查看效果</button>
<button onclick="aEvent();">添加事件</button>
<button onclick="dEvent();">取消事件</button>