JavaScript onclick

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 变量>>