資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究JavaScript 中的事件觸發
JavaScript 中的事件是瀏覽器或使用者執行的操作。一些事件示例如下：
網頁載入時
按鍵按下時
滑鼠懸停時
點選時，等等。
當嵌入在 HTML 中的 JavaScript 程式碼執行時，js 會對這些事件做出反應並允許程式碼執行。每當這些 JavaScript 程式碼執行時，我們稱之為觸發事件。
示例
讓我們看一個簡單的例子來理解事件觸發的整個概念，從頭到尾。
<html>
<body>
<button id="dmrc">Click me!! I change number.</button>
<p id="num"></p>
<script>
const btn = document.getElementById("dmrc");
btn.addEventListener('click', () => {
document.getElementById("num").innerHTML=Math.floor(Math.random()*100);
});
</script>
</body>
</html>
在上面的示例中，HTML 部分是一個按鈕和一個段落（<p>）。這裡，首先我們使用document.getElementById()函式將按鈕的引用儲存在名為“btn”的變數中。
然後，我們有一個帶有“click”關鍵字的事件監聽器，它將捕獲發生在按鈕上的任何點選事件。每當點選按鈕時，事件監聽器就會被啟用，並返回一個 1 到 99 之間的隨機數，並在 id 為“num”的段落 <p> 中顯示。
使用 addEventListener 觸發事件
我們將要使用的方法是 addEventListener()。基本上，addEventListener()是一個接受兩個引數的函式。首先是事件名稱，其次是處理程式函式。
語法
addEventListener(EventName,EventHandlerFunction());
示例
我們在 addEventListener() 函式內指定兩個引數：我們想要為此處理程式註冊的事件的名稱，以及包含我們想要作為響應執行的處理程式函式的程式碼。
<html>
<body>
<button id="dmrc">Click me!! I change number.</button>
<p id="num"></p>
<script>
const btn = document.getElementById("dmrc");
function changeNum(){
document.getElementById("num").innerHTML=Math.floor(Math.random()*100);
}
btn.addEventListener('click', changeNum);
</script>
</body>
</html>
這段程式碼與上面程式碼的區別在於，我們使用單獨的名稱定義了處理程式函式。使用這些函式的方法有很多種，建議您必須嘗試這些函式和方法。
觸發事件的各種方法
讓我們透過應用各種型別的觸發事件和處理程式函式來試驗我們的按鈕。
建議建立一個 .HTML 檔案，嘗試將 click 關鍵字替換為下面列出的各種其他操作，並相應地進行嘗試。
使用 dblclick 觸發事件
在此，事件將在滑鼠雙擊時觸發，而不是在前面的示例中顯示的單擊時觸發。
語法
addEventListener('dblclick', ()=>{ } );
示例
<html>
<body>
<button id="dmrc">Double Click me!! I change number.</button>
<p id="num"></p>
<script>
const btn = document.getElementById("dmrc");
function changeNum(){
document.getElementById("num").innerHTML=Math.floor(Math.random()*100);
}
btn.addEventListener('dblclick', changeNum);
</script>
</body>
</html>
使用 focus 和 blur 觸發事件
當按鈕獲得焦點和失去焦點時，數字會發生變化；嘗試點選 Tab 鍵將焦點放在按鈕上，然後再次點選 Tab 鍵將焦點移開。當獲得焦點時，它們通常用於顯示有關填寫表單欄位的資訊，或者如果填寫了無效值則顯示錯誤訊息。
語法
btn.addEventListener('focus', changeNum);
btn.addEventListener('blur', changeNum);
示例
<html>
<body>
<button id="dmrc">Click me!! I change number.</button>
<p id="num"></p>
<script>
const btn = document.getElementById("dmrc");
function changeNum(){
document.getElementById("num").innerHTML=Math.floor(Math.random()*100);
}
btn.addEventListener('focus', changeNum);
btn.addEventListener('blur', changeNum);
</script>
</body>
</html>
在這裡，我們只是將關鍵字從 click 更改為 focus 或 dblclick。因此，建議找到此類操作關鍵字，並嘗試使用上面的示例程式碼。
一些這樣的關鍵字有 mouseover、mouseout、scroll 等。
其他觸發事件的方法
雖然我們有強大的可擴充套件方法來處理事件，即addEventListener()，但有時我們可能需要使用其他方法來處理事件。事件處理程式屬性和內聯事件處理程式是我們可以用來處理事件的其他兩種方法。
事件處理程式屬性
諸如“按鈕”之類的物件具有on+eventName之類的屬性。例如，onclick。這稱為事件處理程式屬性。使用此方法的缺點是我們無法在一個物件上使用多個操作事件。
示例
<html>
<body>
<button id="dmrc">Click me!! I change number.</button>
<p id="num"></p>
<script>
const btn = document.getElementById("dmrc");
btn.onclick = () =>{
document.getElementById("num").innerHTML=Math.floor(Math.random()*100);
}
</script>
</body>
</html>
內聯事件觸發
這是處理事件的最古老且不推薦的方法。當事件發生時，屬性值實際上是您希望執行的 JavaScript 程式碼。這裡沒有使用 script 標籤，這將使程式碼變得混亂，如果使用此方法處理大型專案，則難以處理。
示例
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('tut').innerHTML=Date()">click me to know time.</button>
<p id="tut"></p>
</body>
</html>
結論
在本教程中，我們學習了觸發事件的各種方法。我們從稱為 addEventListeners 的方法開始，最後總結了許多觸發事件的方法以及各種執行程式碼示例。
906 次瀏覽
