[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>