一、3種實現方式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js點擊事件</title> </head> <body> <!-- 第三種方式--> <button id="btn" onclick="threeFn()">點我</button> <script type="text/javascript"> var btn = document.getElementById("btn"); // 第一種 通過點擊事件 btn.onclick = function(){ alert("這是第一種點擊方式"); } // 第二種 監聽點擊事件 btn.addEventListener('click', function(){ alert("這是第二種點擊方式"); }) //btn.addEventListener('click', twoFn); function twoFn(){};
//通過函數名來引用外部函數
// 第三種 通過方法響應點擊事件 function threeFn(){ alert("這是第三種點擊方式"); } </script> </body> </html>
二、方式 ①、③ 一目了然，說明一下方式 ② :
document.addEventListener()，用於向文檔添加事件句柄。
提示1：document.removeEventListener()，用來移除addEventListener()方法添加的事件句柄，不支持匿名添加的函數
提示2：使用 element.addEventListener()，方法為指定元素添加事件句柄
語法： document.addEventListener(event, function, useCapture);
event: 事件名稱，以點擊事件為例，不要使用“on”前綴，要用“click”來取代“onclick”。
function：事件觸發后執行的函數
useCapture：ture（事件句柄在捕獲階段進行）/ false（可選，默認。事件句柄在冒泡階段進行）
捕獲事件：當父子div都有點擊事件時，先執行父級事件
冒泡事件：先執行子級事件
瀏覽器支持：谷歌1.0，ie 9.0，火狐1.0，opera 7.0 起開始支持
為了兼容其他早版本的瀏覽器可以使用 attachEvent() 方法來添加事件句柄。
if (document.addEventListener) { //所有主流瀏覽器 document.addEventListener("click", myFunction); } else if (document.attachEvent) { // IE 8 及更早 IE 版本，opera 7 及更早版本 document.attachEvent("onclick", myFunction); }
三、其他事件對象
HTML DOM 事件
HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。事件通常與函數結合使用，函數不會在事件發生前被執行！ (如用戶點擊按鈕)。
下面說一下常用的鼠標事件和鍵盤事件。
鼠標事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onclick | 當用戶點擊某個對象時調用的事件句柄。 | 2 |
| oncontextmenu | 在用戶點擊鼠標右鍵時觸發 | |
| ondblclick | 當用戶雙擊某個對象時調用的事件句柄。 | 2 |
| onmousedown | 鼠標按鈕被按下。 | 2 |
| onmouseenter | 當鼠標指針移動到元素上時觸發。 | 2 |
| onmouseleave | 當鼠標指針移出元素時觸發 | 2 |
| onmousemove | 鼠標被移動。 | 2 |
| onmouseover | 鼠標移到某元素之上。 | 2 |
| onmouseout | 鼠標從某元素移開。 | 2 |
| onmouseup | 鼠標按鍵被松開。 | 2 |
onmousemove 是鼠標在元素上移動時觸發，且在元素上每移動一下就會觸發一次。
onmouseover 是鼠標移入元素時觸發一次，再次在元素上移動時不會觸發，但是鼠標移入元素內的子元素時也會觸發（冒泡）
onmouseenter 僅鼠標移入時，觸發一次，且不冒泡
鍵盤事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onkeydown | 某個鍵盤按鍵被按下。 | 2 |
| onkeypress | 某個鍵盤按鍵被按下。 | 2 |
| onkeyup | 某個鍵盤按鍵被松開。 | 2 |
三者區別：
執行順序：onkeydown–>onkeypress–>onkeyup
1. onkeydown：鍵盤一按下就觸發的事件，鍵盤上任意鍵都會觸發onkeydown()事件。捕獲的keyCode不區分大小寫
2. onkeypress：鍵盤一按下就觸發的事件，同onkeydown（除去功能鍵，如：Esc,Shift,Ctrl..）區分大小寫。
3. onkeyup：按鍵一松開就觸發的事件。鍵盤上任意鍵都會觸發onkeyup()事件。
特殊情況：
*三個事件都觸發Enter鍵
*onkeydown和onkeyup同時存在，onkeyup不觸發Fn。onkeyup單個觸發
*三個事件同時存在時，alert只會彈出onkeydown和onkeypress
*只能在onkeydown事件中改變輸入字符，如：event.keyCode=65;
*漢字拼音輸入的過程只觸發onkeydown和onkeyup
四：DOM 0 和 DOM 2
0 級 DOM
分2個： 一是 在標簽內寫onclick事件 （方法3）
二是 在 js 中寫onclick= function(){ } 函數（方法1）
2級 DOM
1個：監聽方法（方法2）
區別：
dom2不會覆蓋會依次執行，dom 0 級會覆蓋，執行最新事件。
dom0 和dom2 可以共存，不相互覆蓋，dom 0 之前一定覆蓋。
js內的點擊事件（1）優先於標簽內響應事件（3），點擊事件和監聽事件都要在頁面加載后才可執行，比如把腳本放到body內容后面
0級dom為某個元素的同一行為綁定不同的方法在行內會分別執行，在<script>中會覆蓋,也就是說標簽內的響應事件是允許分別執行的，但是如果存在js內的同一行為事件，標簽內的事件都會被覆蓋掉。
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <body> <p>單擊按鈕觸發函數。</p> <button id="btn" onclick="myFunction();fun2()">點我</button> <p id="demo"></p> <script> document.getElementById("btn").onclick = function(){ alert("這是第1種點擊方式"); } document.getElementById("btn").addEventListener('click', function(){ alert("這是第二種點擊方式"); }) function myFunction(){ alert("這是第3種點擊方式"); } function fun2(){ document.getElementById("demo").innerHTML="Hello World1"; } </script> </body> </html>
結果：執行 document.getElementById("btn").onclick，執行document.getElementById("btn").addEventListener 。
// myFunction();fun2()；不執行
<!DOCTYPE html> <html> <body> <p>單擊按鈕觸發函數。</p> <button id="btn" onclick="myFunction();fun2()">點我</button> <p id="demo"></p> <script> function myFunction(){ alert("這是第3種點擊方式"); } function fun2(){ document.getElementById("demo").innerHTML="Hello World1"; } </script> </body> </html>
結果：myFunction();fun2()；都執行
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <script> document.getElementById("btn").onclick = function(){ alert("這是第1種點擊方式"); } document.getElementById("btn").addEventListener('click', function(){ alert("這是第二種點擊方式"); }) function myFunction(){ alert("這是第3種點擊方式"); } function fun2(){ document.getElementById("demo").innerHTML="Hello World1"; } </script> </head> <body> <p>單擊按鈕觸發函數。</p> <button id="btn" onclick="myFunction();fun2()">點我</button> <p id="demo"></p> </body> </html>
結果：myFunction();fun2()；執行，其他不執行.