JavaScript教程-JavaScript onclick 事件
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>输出
示例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>输出
示例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>输出
