Sunayan Chandra
Thursday, 11 September 2014
Various Methods for Handling Click Event in HTML
<!DOCTYPE html> <!-- Various Methods for Handling Click Event in HTML: ================================================= --> <!-- Method 1: Without function -------------------------- --> <html> <head> <title>testing</title> </head> <body> <h1 onclick="this.innerHTML='Text clicked'">Click on this text</h1> </body> </html> <!-- Method 2: Use of function with Argument --------------------------------------- --> <html> <head> <title>testing</title> <script> function changeText (element) { element.innerHTML = 'Text clicked'; } </script> </head> <body> <h1 onclick="changeText(this)">Click on this text</h1> </body> </html> <!-- Method 3: Use of function without Argument ------------------------------------------ --> <html> <head> <title>testing</title> <script> function changeText() { document.getElementById('demo').innerHTML = 'Changed text'; } </script> </head> <body> <h1 id="demo" onclick="changeText()">Click to change text</h1> </body> </html> <!-- Method 4: Use of function without Argument, without setting onclick ------------------------------------------------------------------- --> <html> <head> <title>testing</title> </head> <body> <h1 id="demo">Click on this text</h1> <script> document.getElementById("demo").onclick = function() { this.innerHTML = 'Changed text'; }; </script> </body> </html> <!-- Method 5: Use of function without Argument, without setting onclick, with no script in body ------------------------------------------------------------------------------------------- --> <html> <head> <title>testing</title> <script> function attachClick () { document.getElementById("demo").onclick = function () { this.innerHTML = 'Changed text'; }; } </script> </head> <body onload="attachClick()"> <h1 id="demo">Click on this text</h1> </body> </html> <!-- Method 6: Use of function without Argument, without setting onclick, with no script in body, without setting onload ------------------------------------------------------------------------------------------------------------------- --> <html> <head> <title>testing</title> <script> window.onload = function() { document.getElementById("demo").onclick = function () { this.innerHTML = 'Changed text'; }; } </script> </head> <body> <h1 id="demo">Click on this text</h1> </body> </html> <!-- Method 7: Use of function without Argument, without setting onclick, with no script in body, without setting onload ------------------------------------------------------------------------------------------------------------------- But but attaching click to whole of window. --> <html> <head> <title>testing</title> <script> document.addEventListener("click", function() { document.getElementById("demo").innerHTML = "Changed text"; }); </script> </head> <body> <h1 id="demo">Click on this text</h1> </body> </html> <!-- Method 8: Use of function without Argument, without setting onclick, with no script in body, without setting body onload ------------------------------------------------------------------------------------------------------------------------ --> <html> <head> <title>testing</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#demo").click(function() { this.innerHTML = 'Changed text'; }); }); </script> </head> <body> <h1 id="demo">Click on this text</h1> </body> </html>
No comments:
Post a Comment
Newer Post
Home
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment