使用 JavaScript 设置 onclick

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 JavaScript 设置 onclick

作者：迹忆客最近更新：2024/03/19 浏览次数：

在本教程中，我们将讨论如何使用 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 中类似于 class、id 等元素的属性。

或者，你可以直接使用 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 将执行，结果将是相似的。例如，具有 id 为 textElement 的元素的颜色将更改为红色。

此外，你可以使用 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>

在这个例子中，我们传递了两个参数，this 和 red，this 将一个 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>

一旦文档加载，它将向具有 textElement 的 id 的元素添加一个事件侦听器。

上一篇：JavaScript 中的枚举器

下一篇：在 JavaScript 中的同一窗口或标签页中打开 URL

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间：2025/02/21 浏览次数：178 分类：JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间：2025/02/21 浏览次数：150 分类：JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

jQuery 中的日期选择器

发布时间：2024/03/24 浏览次数：99 分类：JavaScript

本文将讨论使用 jQuery UI 库的 jQuery 中的 Datepicker。

用 jQuery 检查复选框是否被选中

发布时间：2024/03/24 浏览次数：102 分类：JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 中的 $.Ajax 数据类型

发布时间：2024/03/24 浏览次数：133 分类：JavaScript

本教程演示了在 jQuery 中使用 $.ajax 数据类型。

在 jQuery 中检查字符串是否包含子字符串

发布时间：2024/03/24 浏览次数：106 分类：JavaScript

本教程演示了如何在 jQuery 中使用 contains() 方法。

在 jQuery 中检查和取消检查复选框

发布时间：2024/03/24 浏览次数：94 分类：JavaScript

本文演示了如何使用 jQuery 选中和取消选中复选框。

jQuery 中的 Window.onload 与 $(document).ready

发布时间：2024/03/24 浏览次数：180 分类：JavaScript

本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。

迹忆客专注技术分享