JavaScript onclick事件


JavaScript onclick事件

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

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

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

句法

现在,我们看到在HTML和javascript中使用onclick事件的语法(没有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 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>

输出量

点击给定的按钮后,输出将是-

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

输出量

单击文本“单击我”后,输出为-

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

输出量

单击文本“单击我”后,输出为-

Made with ❤️ in Chengdu. Copyright reserved 2019-2022.

蜀ICP备20006366号-1