JavaScript onclick()基础教程文档

收录于 2023-04-20 00:10:05 · بالعربية · English · Español · हिंदीName · 日本語 · Русский язык · 中文繁體

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

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

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

语法

现在，我们在HTML中看到了使用 onclick 事件的语法，并且在javascript中(无需 addEventListener()方法或使用 addEventListener()方法)。

在HTML中

在JavaScript中

object.onclick=function() { myScript };

在JavaScript中使用addEventListener()方法

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 lidihuo.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>

输出

This is an example of using onclick attribute in HTML.

Click the following button to see the effect.

Example2-使用JavaScript

在此示例中，我们使用JavaScript的 onclick 事件。在这里，我们将 onclick 事件与段落元素一起使用。

当用户单击paragraph 元素，将执行相应的功能，并更改该段落的文本。点击

元素后，背景颜色，大小，边框和文字的颜色也会改变。

<!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 lidihuo.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>

输出

This is an example of using onclick event.

Click the following text to see the effect.

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

输出

This is an example of using click event.