JavaScript onclick事件

📌 相关文章

📜 JavaScript onclick事件

📅 最后修改于: 2020-10-26 02:23:47 🧑 作者: Mango

JavaScript onclick事件

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

使用JavaScript，可以将该事件动态添加到任何元素。它支持所有HTML元素，除了，，，<style>，<script>，<base>，<iframe>，<bdo>，<br>，<meta>和<param>。这意味着我们不能在给定的标签上应用onclick事件。</ html></p> <p>在HTML中，我们可以使用onclick属性并为其分配JavaScript函数。我们还可以使用JavaScript的addEventListener()方法并将click事件传递给它，以提高灵活性。</p> <h4>句法</h4> <p>现在，我们看到在HTML和javascript中使用onclick事件的语法(没有addEventListener()方法或使用addEventListener()方法)。</p> <h4>在HTML中</h4> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;"><element onclick = "fun()"> </span></code></pre> </div> <h4>在JavaScript中</h4> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;">object.onclick = function() { myScript }; </span></code></pre> </div> <h4>在JavaScript中，使用addEventListener()方法</h4> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;">object.addEventListener("click", myScript); </span></code></pre> </div> <p>让我们通过一些插图来了解如何使用onclick事件。现在，我们将看到在HTML和JavaScript中使用onclick事件的示例。</p> <h4>示例1-在HTML中使用onclick属性</h4> <p>在此示例中，我们使用HTML onclick属性，并为其分配JavaScript函数。当用户单击给定按钮时，将执行相应的函数，并在屏幕上显示一个警告对话框。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;"><!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> </span></code></pre> </div> <p>输出量</p> <p><img class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com/front_eng_imgs/javatpoint/java/javascript-onclick-event.png"/></p> <p>点击给定的按钮后，输出将是-</p> <p><img class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com/front_eng_imgs/javatpoint/java/javascript-onclick-event2.png"/></p> <h4>示例2-使用JavaScript</h4> <p>在此示例中，我们使用JavaScript的onclick事件。在这里，我们将onclick事件与段落元素一起使用。</p> <p>当用户单击段落元素时，将执行相应的函数，并更改段落的文本。在点击<p>元素，文本的背景颜色，大小，边框和颜色也会改变。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;"><!DOCTYPE html> <html> <head> <title> onclick event

This is an example of using onclick event.

Click the following text to see the effect.

Click me

输出量

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

示例3-使用addEventListener()方法

在此示例中，我们使用JavaScript的addEventListener()方法将click事件附加到段落元素。当用户单击段落元素时，段落的文本将更改。

单击该段落时，元素的背景颜色和字体大小也会改变。






 This is an example of using click event. 
 Click the following text to see the effect. 
Click me

输出量

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