一，監聽相關：
1.綁定HTML元素屬性：
<input type="button" value="clickMe" onclick="check(this)">
2.綁定DOM
document.getElementById("xxx").onclick
3.IE中的監聽方法：
[object].attachEvent("事件類型","處理函數");//添加監聽
[object].detachEvent("事件類型","處理函數");//取消監聽
如：
window.onload=function(){//當整個HTML文檔加載好之后就會觸發onload事件
document.getElementById("test1").attachEvent("onclick",show);//給第一個按鈕注冊了onclick事件
document.getElementById("test2").onclick=function(){//解除第一個按鈕的onclick事件
document.getElementById("test1").detachEvent("onclick",show);
}
};
4.標准DOM中的事件監聽方法：
[object].addEvent("事件類型","處理函數","冒泡事件或捕獲事件");
[object].removeEvent("事件類型","處理函數","冒泡事件或捕獲事件");
addEventListener()方法特點：
-
element.addEventListener(event, function, useCapture)中的第三個參數可以控制指定事件是否在捕獲或冒泡階段執行。true - 事件句柄在捕獲階段執行。false- 默認- 事件句柄在冒泡階段執行。
-
addEventListener() 可以給同一個元素綁定多個事件，不會發生覆蓋的情況。如果給同一個元素綁定多個事件，那么采用先綁定先執行的規則。
-
addEventListener() 在綁定事件的時候，事件名稱之前不需帶 on 。
-
注意該方法的兼容性，如果要兼容 IE6-8 ，不能使用該方法。下面三會有介紹。
-
可以使用 removeEventListener() 來移除之前綁定過的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOM事件監聽</title>
</head>
<body>
<input type="button" id="test1" value="測試1">
<button type="button" id="test2"><b>測試2</b></button>
<script type="text/javascript">
function show(){
alert("hello");
}
window.onload=function(){
var test1=document.getElementById("test1");
var test2=document.getElementById("test2");
test1.addEventListener("click", show, false);//給第一個按鈕注冊了onclick事件
/*test2.onclick=function(){//解除第一個按鈕的onclick事件(方法一)
test1.removeEventListener("click", show, false);
}*/
test2.addEventListener("click", function(){//解除第一個按鈕的onclick事件(方法二)
test1.removeEventListener("click", show, false);
}, false);
}
</script>
</body>
</html>
參考：https://www.jianshu.com/p/2c2d0b8f210f
二，工具集：
// event(事件)工具集，來源：github.com/markyun markyun.Event = { // 頁面加載完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } else { window.onload = function() { oldonload(); fn(); }; } }, // 視能力分別使用dom0||dom2||IE方式 來綁定事件 // 參數： 操作的元素,事件名稱 ,事件處理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件類型、需要執行的函數、是否捕捉 element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent('on' + type, function() { handler.call(element); }); } else { element['on' + type] = handler; } }, // 移除事件 removeEvent : function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.datachEvent) { element.detachEvent('on' + type, handler);