用一個例子來解說：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<a herf="#" onclick="alert('hi');">按我！</a>
</body>
</html>
在第五行的程式碼裡，我們建立一個連結，先用 # 代替要連過去的網站，然後在頁面要出現的字叫做：按我!，那我們也在替這個連結建立一個屬性，當我們點擊（onclick) 的時候會彈跳 (alert) 出 hi。
其實我們用 JavaScript 來代替上述用法，寫一個 function，在 clickme 時印出我被按了。
function clickme(){
console.log('我被按了！');
}
那 HTML 就拿掉 alert 如果要用 JS 的 onclick 來寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<a herf="#" onclick="clickme();">按我！</a>
</body>
</html>
我們剛剛做的就是在 onclick 上掛上 function，當我們按了該物件，就會執行 fuction
像剛剛的寫法，就是把 function 掛在元素上，另外一種寫法，是可以把事件寫在別的地方，我們稱這樣的寫法叫做 事件監聽者（Event Listener）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<a herf="#" id="clicker">按我！</a>
</body>
</html>
接下來要在 JS 定義 clicker
var clicker =document.quertSelector(#clickr)
接下來要幫它加事件：
var clicker =document.querySelector('#clicker');
clicker.addEventListener("click",function(){
console.log('我被按了');
});
addEventlistener 後面接小括號，小括號裡面第一個指得是監聽的事件，並且用逗號隔開，後面接要執行的 function。
點開網頁，到控制台，發現按連結後，後台會出現 我被按了 的字樣。
iThome鐵人賽
看影片追技術