js點選事件（click）的實現方法和（其他的事件物件）

阿新 • • 發佈：2020-10-14

一、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>