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

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

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

语法

现在,我们来看一下如何在 HTML 和 JavaScript 中使用 onclick 事件的语法(不使用 addEventListener() 方法,或者使用 addEventListener() 方法)。

在 HTML 中

<element onclick="fun()">

在 JavaScript 中

object.onclick = function() { myScript };

通过使用 addEventListener() 方法在 JavaScript 中

object.addEventListener("click", myScript);

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

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

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

<!DOCTYPE html>
<html>
<head>
<script>
function fun() {
  alert("欢迎访问 javaTiku.cn");
}
</script>
</head>
<body>
<h3>这是在 HTML 中使用 onclick 属性的示例。</h3>
<p>单击以下按钮以查看效果。</p>
<button onclick="fun()">单击我</button>
</body>
</html>

输出

1.png

示例2 - 使用 JavaScript

在此示例中,我们使用 JavaScript 的 onclick 事件。我们在段落元素上使用了 onclick 事件。

当用户单击段落元素时,将执行相应的函数,并更改段落的文本。单击 <p> 元素后,元素的背景颜色、大小、边框和文本颜色也会改变。

<!DOCTYPE html>
<html>
<head>
<title>onclick event</title>
</head>
<body>
<h3>这是使用 onclick 事件的示例。</h3>
<p>单击以下文本以查看效果。</p>
<p id="para">单击我</p>
<script>
document.getElementById("para").onclick = function() {
  fun();
};
function fun() {
  document.getElementById("para").innerHTML = "欢迎访问 javaTiku.cn";
  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>

输出

2.png

示例3 - 使用 addEventListener() 方法

在此示例中,我们使用 JavaScript 的 addEventListener() 方法,将 click 事件附加到段落元素。当用户单击段落元素时,段落的文本将会更改。

单击段落后,元素的背景颜色和字体大小也会改变。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>这是使用 click 事件的示例。</h3>
<p>单击以下文本以查看效果。</p>
<p id="para">单击我</p>
<script>
document.getElementById("para").onclick = function() {
  fun();
};
function fun() {
  document.getElementById("para").innerHTML = "欢迎访问 javaTpoint.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";
}
</script>
</body>
</html>

输出

3.png

标签: js, JavaScript, JavaScript语言, JavaScript开发, JavaScript语法, JavaScript脚本, JavaScript教程, JavaScript入门, JavaScript入门教程, JavaScript进阶, JavaScript宝典, JavaScript学习, JavaScript指南, JavaScript大全