JavaScript onclick

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中

<element onclick="fun()">

在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 bianchenghao6.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 bianchenghao6.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 bianchenghao6.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.

Click the following text to see the effect.

Click me

<< Python 语法 Python 变量>>

JavaScript dblclick

addEventListener()