JavaScript onclick事件

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

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

在HTML中，我们可以使用onclick属性并给它赋值一个JavaScript函数。我们还可以使用JavaScript的addEventListener()方法，并将click事件传递给它，以实现更大的灵活性。

语法

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

在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("Welcome to the javaTpoint.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>

输出

JavaScript onclick事件

点击给定的按钮后，输出结果将是 –

JavaScript onclick事件

示例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 javaTpoint.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>

输出

JavaScript onclick事件

点击下面的文本 点我, 输出将会是 –

JavaScript onclick事件

示例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>
document.getElementById("para").onclick = function() {
fun()
};
function fun() {
document.getElementById("para").innerHTML = "Welcome to the 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>

输出

JavaScript onclick事件