<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>該實例使用 addEventListener() 方法來向按鈕添加點擊事件。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", function()
{
document.getElementById("demo").innerHTML = "Hello World";
});
</script>
</body>
</html>
HTML DOM addEventListener() 方法
爲 <button> 元素添加點擊事件。 當用戶點擊按鈕時，在 id="demo" 的 <p> 元素上輸出 "Hello World" :
事件類型
事件類型整體來說可以分爲三大類：
1）鼠標類
click 點擊
mousedown 按下
mouseup 鬆開
mouseenter 划進
mouseleave 劃出
mouseover 划進
mouseout 劃出
mousemove 移動
上面兩個划進劃出，區別在於是否對子元素有影響，具體可以去百度查一查用法的差異
2）鍵盤類
keydown 按下（按所有鍵都會觸發）
keypress 按下（按字符集觸發）
keyup 鬆開
兩者設計的初衷就不同。
keypress 就是用來檢測用戶輸了啥字符的，而 keydown 則是單純的檢測用戶是否按了鍵盤上的按鍵，所以 keypress 常用。
兩者事件對象上的 keyCode 值也不同。
keyCode是一個代碼，與鍵盤上的一個鍵對應。在 keypress 事件中，這個 keyCode 還與 ASCII碼對應，比如keyCode 等於 105 ，就是按了 i。
最後說下，判斷一個前端專業不專業，就問下他開發界面的時候有沒有考慮過鍵盤事件。
3）UI類
load 加載
unload 重載
resize 改變瀏覽器尺寸
scroll 使用滾動條
addEventListener()方法將事件處理程序附加到指定的元素。
addEventListener()方法將事件處理程序附加到元素，而不覆蓋現有的事件處理程序。
您可以向一個元素添加許多事件處理程序。您可以向一個元素添加許多相同類型的事件處理程序，即兩個“單擊”事件。
您可以將事件偵聽器添加到任何DOM對象，而不僅僅是HTML元素。即window對象。
addEventListener()方法可以更容易地控制事件對冒泡的反應。
使用addEventListener()方法時，JavaScript與HTML標記分離，以提高可讀性，
並允許您添加事件偵聽器，即使您不控制HTML標記也是如此。
您可以使用removeEventListener()方法輕鬆刪除事件偵聽器。
語法：element.addEventListener(event, function, useCapture);
- 第一個參數是事件的類型（如“ click”或“ mousedown”）。
- 第二個參數是我們想要在事件發生時調用的函數。
- 第三個參數是一個布爾值，指定是使用事件冒泡還是事件捕獲。此參數是可選的。
請注意，您不要爲事件使用“on”前綴; 用“ click”而不是“ onclick”。
document.getElementById("myBtn").addEventListener("click", displayDate);
向元素添加事件處理程序
當用戶點擊某個元素時提醒“Hello World！” ：
element.addEventListener("click", function(){ alert("Hello World!"); });
您還可以在外部定義函數，然後把函數名當參數傳：
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
將許多事件處理程序添加到同一元素
addEventListener()方法允許您向同一元素添加許多事件，而不會覆蓋現有事件
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);
將事件處理程序添加到window對象
addEventListener()方法允許您在任何HTML DOM對象上添加事件偵聽器，例如HTML元素，HTML文檔，window對象或支持事件的其他對象，
如xmlHttpRequest對象。
添加在用戶調整窗口大小時觸發的事件偵聽器：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
傳遞參數值時，使用“匿名函數”，使用以下參數調用指定的函數：
element.addEventListener("click", function(){ myFunction(p1, p2); });
事件冒泡或事件捕獲？
HTML DOM中有兩種事件傳播方式，即冒泡和捕獲。
事件傳播是一種在事件發生時定義元素順序的方法。
如果<div>元素中有<p>元素，並且用戶單擊<p>元素，應該首先處理哪個元素的“click”事件？
在冒泡中，首先處理內部元素的事件，然後處理外部：首先處理<p>元素的click事件，然後處理<div>元素的click事件。
在捕獲最外層元素時，首先處理事件然後處理內部：首先處理<div>元素的click事件，然後處理<p>元素的click事件。
使用addEventListener()方法，您可以使用“useCapture”參數指定傳播類型：
默認值爲false，將使用冒泡傳播，當值設置爲true時，事件使用捕獲傳播。
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener()方法
element.removeEventListener("mousemove", myFunction);
注：該addEventListener()和removeEventListener()方法並不在IE 8和更早版本的支持。
但是，對於這些特定的瀏覽器版本，您可以使用attachEvent()方法將事件處理程序附加到元素，以及detachEvent()刪除它的方法，解決方案
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 對於所有主流瀏覽器，IE 8及更早版本除外
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // 適用於IE 8及更早版本
x.attachEvent("onclick", myFunction);
}