使用 JavaScript 設定 onclick

Tahseen Tauseef 2023年1月30日 2022年5月11日
  1. 什麼是 JavaScript 中的事件和事件監聽器
  2. 在 JavaScript 中向元素新增 onClick 事件偵聽器
  3. 在 JavaScript 中如何將元素的引用傳遞給 onClick 事件偵聽器
  4. 在 JavaScript 中如何將 onClick 事件監聽器新增到 Jquery
使用 JavaScript 設定 onclick

在本教程中,我們將討論如何使用 JavaScript 將 onClick 偵聽器附加到元素;我們會討論:

  • 什麼是 JavaScript 中的 Event 和 EventListener 或 EventHandler
  • 如何向元素新增 onClick 事件監聽器
  • 如何傳遞對 onClick EventListener 的引用
  • 如何使用 Jquery 新增 onClick 事件監聽器

什麼是 JavaScript 中的事件和事件監聽器

事件是瀏覽器或終端使用者所做的事情。這些事件可以由稱為事件處理程式或事件偵聽器的 JavaScript 概念處理。事件偵聽器在特定事件發生時執行。

onClick 是這些事件監聽器之一。onClick 事件偵聽器在使用者單擊元素時觸發/執行。

在 JavaScript 中向元素新增 onClick 事件偵聽器

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement" onclick="ChangeColor()">
            Change Color to Red
        </div>
        <script>
            function ChangeColor() {
              document.getElementById("textElement").style.color = "red";
            }
        </script>

    </body>
</html>

上面的程式碼將觸發/執行 ChangeColor 方法,該方法將使用 Document 物件模型訪問元素,ID 為 textElement 並將其文字顏色更改為紅色。

請注意,onClick 被設定為 HTML 中類似於 classid 等元素的屬性。

或者,你可以直接使用 JavaScript 設定元素的屬性 onClick

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement">
            Change Color to Red
        </div>
        <script>
          document.getElementById("textElement").onclick = function() {
             document.getElementById("textElement").style.color = "red";
          };
        </script>

    </body>
</html>

這將訪問 textElement 併為其分配一個 function;當使用者點選 HTML 元素時,這個 function 將執行,結果將是相似的。例如,具有 idtextElement 的元素的顏色將更改為紅色。

此外,你可以使用 JavaScript 元素的 addEventListener 方法/函式來執行相同的功能。

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement">
            Change Color to Red
        </div>
        <script>
            let element = document.getElementById("textElement");
             element.addEventListener("click", function(){
                 element.style.color = "red";
             });
        </script>

    </body>
</html>

addEventListener 有兩個引數;第一個是要在 HTML 元素上偵聽的事件型別,第二個是在某個事件發生時執行的回撥函式。

如果你使用的是 Internet Explorer,由於相容性問題,addEventListener 將不起作用。我們將不得不使用 attachEvent 使用回退來複制這種行為。

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement">
            Change Color to Red
        </div>
        <script>
            let element = document.getElementById("textElement");
            if(element.addEventListener){
               element.addEventListener('click', function(){
                    element.style.color = "red";
               });
            }else if(element.attachEvent){
               element.attachEvent('onclick', function(){
                    element.style.color = "red";
               });
            }
        </script>

    </body>
</html>

在 JavaScript 中如何將元素的引用傳遞給 onClick 事件偵聽器

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement" onclick="ChangeColor(this,'red')">
            Change Color to passed Color
        </div>
        <script>
           function ChangeColor(element,color) {
              element.style.color = color;
           }
        </script>

    </body>
</html>

在這個例子中,我們傳遞了兩個引數,thisredthis 將一個 DOM 元素的引用傳遞給函式,而 red 只是一個字串。

你可以注意到,只需更改第二個引數,我們就可以更改元素的顏色。與其他方法相比,這種方法提高了可重用性。例如,我們可以對多個元素使用 ChangeColor 方法。

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement" onclick="ChangeColor(this,'red')">
            Change Color to Red
        </div>
        <div id="textElement" onclick="ChangeColor(this,'blue')">
            Change Color to Blue
        </div>
        <script>
           function ChangeColor(element,color) {
              element.style.color = color;
           }
        </script>

    </body>
</html>

在 JavaScript 中如何將 onClick 事件監聽器新增到 Jquery

如果你不使用 Vanilla JavaScript,而是使用 Jquery(一個 JavaScript 庫)之類的東西,則過程類似;唯一的區別是語法。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">	
    </script>
    
    <script>
    $(document).ready(function(){
      $("#textElement").click(function(){
        $(this).css('color','red')
      });
    });
    </script>
</head>
    <body>

    <div id="textElement">Change Color to Red</p>

    </body>
</html>

一旦文件載入,它將向具有 textElementid 的元素新增一個事件偵聽器。

相關文章 - JavaScript EventListener

相關文章 - JavaScript EventHandler