但凡點擊、滑鼠、滾輪、鍵盤、伸縮視窗、表單⋯⋯在某個觸發點被觸動時，產生反應，就是事件。
事件在平時是不做任何動作的——不管畫面看不看得到，只有觸發點被觸發了，才做動作，執行寫在事件內的程式碼。
事件的存在，主要是跟使用者產生互動，讓使用者體驗更好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="button" value="send" />
</body>
</html>
畫面上有一個寫著Send的按鈕。
現在為這顆按鈕綁定事件，這個動作叫作註冊監聽。
事件有很多種類，點擊事件中常見的有兩種，以上面程式碼為例來做說明：
畫面元素.onclick = function(){
//執行程式碼
}
先選定要被綁定事件的元素，接著一個半形句號（.）後接onclick，要特別注意的是，onclick`後面的函式不用命名。
var btn = document.querySelector("input");
btn.onclick = function(){
alert("Click the button.");
}
先用querySelector()選取按鈕，再為按鈕綁定事件。
綁定事件後，在函式中放入觸發事件時，要執行的程式碼。
addEventListener()畫面元素.addEventListener("動作", function(){
//執行程式碼
}, false);
這種寫法，addEventListener()後的小括弧要傳入3個參數，動作、函式、false，其中函式不需要命名。
另外，這段程式碼的最後，不要忘記加半形分號（;）。
var btn = document.querySelector("input");
btn.addEventListener("click", function(){
alert("Click the button.");
}, false);
要特別注意的是，在這種寫法中，點擊的程式碼是click，不是onclick。
onclick和addEventListener()差異onclick一次只能綁定一個事件，這是比較舊的點擊事件，現在還能常常看見。
由於只能綁定一個事件，所以當綁定兩個以上的事件時，會把之前的事件覆蓋掉，靈活度較低。
addEventListener是新出來的方法，可以同時綁定多個事件，而且不會把之前的事件覆蓋掉，也是常見的點擊事件。
Chrome的開發者工具中，Element面板下的Event Listeners面板可以查看事件是否綁定成功，還有事件的種類。
只要進入面板後，點選綁定事件的元素，就可以看到結果。
iThome鐵人賽
看影片追技術