JavaScript中綁定事件的幾種方式

在JavaScript中綁定事件的方式有以下幾種,分別是:1.DOM中綁定事件;2.在JavaScript代碼中綁定事件;3.綁定事件監聽函數。

1.DOM中綁定事件

1)添加onclick點擊事件,自定義load()函數

<input type="submit" value="Login"  onclick="load();">  

2)調用load()函數,綁定onclic事件 2.JavaScript代碼中綁定事件

<script type="text/javascript">  
     function load(){  
        alert("dom元素中綁定事件");  
     }  
</script>

1)添加id="submit"

<input type="submit" value="Login" id="submit">  

2)獲取id,添加onclick事件,註意,js要放在input標簽下,要不然無法激活onclick事件

document.getElementById("submit").onclick=function(){  
   //獲取屬性  
   this.getAttribute("type");  
   alert("JavaScript代碼中綁定事件");  
}

3.綁定事件監聽函數

綁定事件主要用的addEventListener()或attachEvent()來綁定事件監聽函數。如下:

1)addEventListener()是標準的綁定事件監聽函數方法,是W3C所支持的,但,ie8.0不支持該方法,它支持的是attachEvent()來綁定事件監聽函數

語法:

elementObject.addEventListener(eventName,handle,useCapture);  

示例:

<input type="button" value="Login" id="submit">
document.getElementById("submit").addEventListener("click",load);  
function load(){  
  alert("addEventListener監聽事件...");  
}

2)attachEvent()來綁定事件監聽函數方法

語法:

elementObject.attachEvent(eventName,handle);  

3)移除監聽事件

語法:

elementObject.removeEventListener(eventName,handle,useCapture);  
document.getElementById("submit").removeEventListener("click",load); 

發佈留言