JavaScript onclick 事件

2025 年 5 月 16 日 | 阅读 3 分钟

onclick 事件通常在用户点击某个元素时发生。它允许程序员在元素被点击时执行 JavaScript 函数。此事件可用于表单验证、警告消息等等。

使用 JavaScript，此事件可以动态地添加到任何元素。它支持所有 HTML 元素，除了 <html>、<head>、<title>、<style>、<script>、<base>、<iframe>、<bdo>、<br>、<meta> 和 <param>。这意味着我们不能在给定的标签上应用 onclick 事件。

在 HTML 中，我们可以使用 onclick 属性并为其分配一个 JavaScript 函数。我们还可以使用 JavaScript 的 addEventListener() 方法并向其传递一个 click 事件以获得更大的灵活性。

语法

现在，我们来看看在 HTML 和 JavaScript 中使用 onclick 事件的语法（不使用 addEventListener() 方法或使用 addEventListener() 方法）。

在 HTML 中

在 JavaScript 中

在 JavaScript 中使用 addEventListener() 方法

让我们通过一些示例来看看如何使用 onclick 事件。现在，我们将看到在 HTML 和 JavaScript 中使用 onclick 事件的示例。

示例 1 - 在 HTML 中使用 onclick 属性

在此示例中，我们使用 HTML onclick 属性并为其分配一个 JavaScript 函数。当用户点击给定按钮时，相应的函数将执行，并在屏幕上显示一个警报对话框。

示例

<!DOCTYPE html>
<html>
<head>
<script>
function fun() {
alert("Welcome to the TpointTech.com");
}
</script>
</head>
<body>
<h3> This is an example of using onclick attribute in HTML. </h3>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()">Click me</button>
</body>
</html>

立即执行

输出

单击给定按钮后，输出将是 -

示例 2 - 使用 JavaScript

在此示例中，我们使用 JavaScript 的 onclick 事件。这里我们使用带有段落元素的 onclick 事件。

当用户点击段落元素时，相应的函数将执行，段落的文本会发生变化。点击 <p> 元素时，背景颜色、大小、边框和文本颜色也会发生变化。

示例

<!DOCTYPE html>
<html>
<head>
<title> onclick event </title>
</head>
<body>
<h3> This is an example of using onclick event. </h3>
<p> Click the following text to see the effect. </p>
<p id = "para">Click me</p>
<script>
document.getElementById("para").onclick = function() {
fun()
};
function fun() {
document.getElementById("para").innerHTML = "Welcome to the TpointTech.com";
document.getElementById("para").style.color = "blue";
document.getElementById("para").style.backgroundColor = "yellow";
document.getElementById("para").style.fontSize = "25px";
document.getElementById("para").style.border = "4px solid red"; 
}
</script>

</body>
</html>

立即执行

输出

点击文本 Click me 后，输出将是 -

示例 3 - 使用 addEventListener() 方法

在此示例中，我们使用 JavaScript 的 addEventListener() 方法将 click 事件附加到段落元素。当用户点击段落元素时，段落的文本会发生变化。

点击段落时，元素的背景颜色和字体大小也会改变。

示例

<!DOCTYPE html>  
<html>  
<head>  
</head>  
<body>  
  <h3>This is an example of using click event.</h3>  
  <p>Click the following text to see the effect.</p>  
  <p id="para">Click me</p>  

  <script>  
    // Function to be called on click
    function fun() {
      document.getElementById("para").innerHTML = "Welcome to the TpointTech.com";  
      document.getElementsByTagName("body")[0].style.color = "blue";  
      document.getElementsByTagName("body")[0].style.backgroundColor = "lightgreen";  
      document.getElementsByTagName("body")[0].style.fontSize = "25px";  
      document.getElementById("para").style.border = "4px solid red";   
    }

    // Add event listener to the paragraph
    document.getElementById("para").addEventListener("click", fun);
  </script>  

</body>  
</html>  

立即执行

输出

点击文本 Click me 后，输出将是 -

下一主题JavaScript dblclick 事件

JavaScript onclick 事件

语法

在 HTML 中

在 JavaScript 中

在 JavaScript 中使用 addEventListener() 方法

示例 1 - 在 HTML 中使用 onclick 属性

示例

示例 2 - 使用 JavaScript

示例

示例 3 - 使用 addEventListener() 方法

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript onclick 事件

语法

在 HTML 中

在 JavaScript 中

在 JavaScript 中使用 addEventListener() 方法

示例 1 - 在 HTML 中使用 onclick 属性

示例

示例 2 - 使用 JavaScript

示例

示例 3 - 使用 addEventListener() 方法

示例

相关帖子

JavaScript dblclick 事件

JavaScript onload 事件

JavaScript onresize 事件

JavaScript addEventListener()

JavaScript 事件

订阅 Tpoint Tech

联系信息