JavaScript Document Object : onclick Event handler
Description
The onclick event handler executes some JavaScript code or function when the pointing device button (for example mouse) is clicked over the document object.
Version
Implemented in JavaScript 1.0
Syntax
document.onclick = "JavascriptCode"
Parameter
JavascriptCode : JavaScript statement or JavaScript function.
Example of Document object : onclick event handler
The following web document shows the effect of click event on the document using onclick event handler.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JavaScript document - onclick() method example</title>
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
document.onclick = docclickhandler;
function docclickhandler() {
alert("The document is clicked...");
}
//]]>
</script>
</head>
<body>
<h1 style="color: red">JavaScript document : event handler : onclick</h1>
<h3> Click anywhere within the document to see the Click event effect ....</h3>
<hr />
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JavaScript document - onclick() method example</title>
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
document.onclick = docclickhandler;
function docclickhandler() {
alert("The document is clicked...");
}
//]]>
</script>
</head>
<body>
<h1 style="color: red">JavaScript document : event handler : onclick</h1>
<h3> Click anywhere within the document to see the Click event effect ....</h3>
<hr />
</body>
</html>
View the example of document object's onclick event handler in the browser
Practice document object's onclick event handler with Online Editor
Supported Browser
| Internet Explorer 7 | Firefox 3.6 | Google Chrome 7 | Safari 5.0.1 | Opera 10 |
| Yes | Yes | Yes | Yes | Yes |
See also :
Please Google+, Like this tutorial on FaceBook, Tweet, save it as bookmark and subscribe with our Feed. Have suggestions? comment using Disqus down this page. Thanks.
