当用户单击元素时,将发生HTML DOM onclick事件。
HTML DOM onclick事件支持所有HTML元素,除了:
- <base>
- <bdo>
- <br>
- <head>
- <html>
- <iframe>
- <meta>
- <param>
- <script>
- <style>
- <title>
用法:
在HTML中:
<element onclick="myScript">
在JavaScript中:
object.onclick = function(){myScript};
在JavaScript中,使用addEventListener()方法:
object.addEventListener("click", myScript);
范例1:使用HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML DOM onclick Event</h2>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById(
"demo").innerHTML = "GeeksforGeeks";
}
</script>
</center>
</body>
</html>
输出:
范例2:使用JavaScript
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML DOM onclick Event</h2>
<p id="demo">Click me.</p>
<script>
document.getElementById("demo").onclick = function() {
GFGfun()
};
function GFGfun() {
document.getElementById(
"demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</center>
</body>
</html>
输出:
之前:
后:
范例3:在JavaScript中,使用addEventListener()方法:
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML DOM onclick Event</h2>
<p id="demo">Click me.</p>
<script>
document.getElementById(
"demo").addEventListener("click", GFGfun);
function GFGfun() {
document.getElementById(
"demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</center>
</body>
</html>
输出:
之前:
后:
支持的浏览器:下面列出了DOM onclick事件支持的浏览器:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
相关用法
- HTML onclick用法及代码示例
- HTML ondragover事件用法及代码示例
- HTML onkeydown事件用法及代码示例
- HTML touchend事件用法及代码示例
- HTML animationend事件用法及代码示例
- HTML onafterprint事件用法及代码示例
- HTML onplay事件用法及代码示例
- HTML onmessage事件用法及代码示例
- HTML animationstart事件用法及代码示例
- HTML onfocusout事件用法及代码示例
- HTML onkeypress事件用法及代码示例
- HTML onbeforeunload事件用法及代码示例
- HTML onbeforeprint事件用法及代码示例
- HTML onended事件用法及代码示例
注:本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 HTML | DOM onclick Event。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。