使用 JavaScript 设置 onclick

Tahseen Tauseef 2023年1月30日
  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