JS動態新增移除事件 和 獲取Event (相容IE和Firefox)
物件名.attachEvent("事件名"，函式名);(IE下)
說明：
事件名稱，要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說事件名不要帶"on"。
函式名，記住不要跟括號最後一個引數是個布林值，表示該事件的響應順序,下面重點介紹一下addEventListener的第3個引數(useCapture)。 userCapture若為true,則瀏覽器採用Capture,若為false則採用bubbing方式。建議用false,看個例子吧。
html程式碼
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技術基地" /> </div>
js程式碼
window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false); } function test1(){ alert("外層div觸發") } function test2(){ alert("內層input觸發") }
自己體驗一下，如果userCapture是true則test1先觸發，如果userCapture是false則test2先觸發。
下面來說一下，attachEvent
這個沒啥好說的，相信大家也都用的挺熟的，主要是傳參那塊，等我用到 再說吧，哈哈哈
示例：
建立繫結方法：
if (typeof document.addEventListener != "undefined") { document.addEventListener("mousedown",_lhlclick,true); } else { document.attachEvent("onmousedown",_lhlclick); }
刪除事件：
if (typeof document.addEventListener != "undefined") {
document.removeEventListener("mousedown",_lhlclick,true);
} else {
document.detachEvent("onmousedown",_lhlclick);
} 下面給出一個實際程式碼
var handler = function () {
alert('ddddd');
};var obj = document.getElementById("fff"); if(window.addEventListener){ // Mozilla, Netscape, Firefox t.addEventListener('click', handler, false); } else if(window.attachEvent) { // IE t.attachEvent('onclick', handler); } else { t.onclick= handler; } //刪除事件 if(window.addEventListener){ // Mozilla, Netscape, Firefox t.removeEventListener('click', handler, false); } else if(window.attachEvent) { // IE t.detachEvent('onclick', handler); } else { t.onclick= ""; }
addEventListener()與removeEventListener()用於處理指定和刪除事件處理程式操作。所有的DOM節點中都包含這兩種方法，並且它們都接受3個引數：要處理的時間名、作為事件處理程式的函式和一個布林值。最後這個布林值引數是true，表示在捕獲階段呼叫事件處理程式；如果是false，表示在冒泡階段呼叫事件處理程式。
addEventListener的引數一共有三個，語法為：
element.addEventListener(type,listener,useCapture)
下面是詳解
•其中element是要繫結函式的物件。
•type是事件名稱，要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說事件名不要帶"on"。
•listener當然就是繫結的函數了，記住不要跟括號
•最後一個引數是個布林值，表示該事件的響應順序,下面重點介紹一下addEventListener的第3個引數(useCapture)。
要在按鈕上為click事件新增事件處理程式，可以使用下列程式碼：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);使用DOM2級方法新增事件處理程式的主要好處是可以新增多個事件處理程式。來看下面的例子：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.addEventListener("click", function () {
alert("Hello World");
}, false);通過addEventListener()新增的事件處理程式只能使用removeEventListener()來移除；移除時傳入的引數與新增處理程式時使用的引數相同。這也意味著通過addEventListener()新增的匿名函式無法移除，如下面的例子所示：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.removeEventListener("click", function () { //無效！
alert(this.id);
}, false);在這個例子中，我使用addEventListener()新增一個事件處理程式。雖然呼叫removeEventListener(0是看似使用了相同的引數，但實際上，第二個引數與傳入addEventListener()中的那一個完全不同的函式。而傳入removeEventListener()中的事件處理程式函式必須與傳入addEventListener()中的相同，如下面的例子所示：
var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！重寫後的這個例子沒有問題，是因為在addEventListener()和removeEventListener()中用來相同的函式。
大多數情況下，都是將事件處理程式新增到事件流的冒泡階段，這樣可以最大限度地相容各種瀏覽器。最好只在需要在是時間到達目標之前截獲它的時候將事件處理程式新增到捕獲階段。如果不是特別需要，我們不建議在事件捕獲階段註冊事件處理程式。
實驗結果是，使用者點選button時，每次都會輸出"I have been clicked!"，說明removeEventListener()函式沒有起到作用。通過查詢資料，得出結論。在使用removeEventListener()函式時，handler函式，必須和使用addEventListener()裡面的handler函式必須相同。所以上面寫的程式碼是錯誤的。修正之後的程式碼應該如下：
<html>
<head>
</head>
<body>
<input id="info" type="button" value="Click Me!" />
<script type="text/javascript">
//addEventListener()和removeEventListener()中handler函式必須相同，移除事件函式才有效。
function myhandler(){
console.log("I have been clicked!");
document.getElementById('info').removeEventListener('click',myhandler,false);
}
var target=document.getElementById('info');
target.addEventListener('click',myhandler,false);
</script>
</body>
</html>
1、直接給物件新增事件
document.all.Object.ondblclick=function(){方法};
2、通過監聽方式新增事件，多事件可並存，按新增順序執行。
if(window.addEventListener)
// Mozilla, Netscape, Firefox
Object.addEventListener("click", function(){方法}, false);
else if(window.attachEvent)
// IE
Object.attachEvent("onclick", function(){方法});
else
// Other
Object.onclick= function(){方法};
例子：
function srchtxtAddOnKeyPress() { if(window.addEventListener) { //其它瀏覽器的事件程式碼: Mozilla, Netscape, Firefox //新增的事件的順序即執行順序 //注意用 addEventListener 新增帶on的事件，不用加on document.getElementById('srchtxt').addEventListener('keypress', keyPressEvt, false); } else { //IE 的事件程式碼 在原先事件上新增 add 方法 document.getElementById('srchtxt').attachEvent('onkeypress',keyPressEvt); } }
3、獲取Event
//判斷當事件keyCode值為13時觸發登入事件
userLoginPasd.onkeydown = function(e){
var e = e || window.event;
if(e.keyCode == 13){
login();
}
}下面提供同時相容IE和Firefox的獲得event物件的方法,在需要用到event物件的地方,呼叫該方法即可.
function getEvent() //同時相容ie和ff的寫法
{
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0)
{
if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
{
return arg0;
}
}
func=func.caller;
}
return null;
} //如呼叫:document.onclick=function(){
var evt=getEvent();
alert(evt);
}