This work is licensed under a Creative Commons

  • Slides: 10
Download presentation
This work is licensed under a Creative Commons Attribution-Share. Alike 4. 0 International License.

This work is licensed under a Creative Commons Attribution-Share. Alike 4. 0 International License. This presentation is released under Creative Commons. A 6 ribute, on 4. 0 License. You are free to use, distribute and modify it , including for commercial purposes, provided you acknowledge the source.

Java. Script Events Source: https: //www. javatpoint. com/javascript-events

Java. Script Events Source: https: //www. javatpoint. com/javascript-events

The change in the state of an object is known as an Event. In

The change in the state of an object is known as an Event. In html, there are various events which represents that some activity is performed by the user or by the browser. When javascript code is included in HTML, js react over these events and allow the execution. This process of reacting over the events is called Event Handling. Thus, js handles the HTML events via Event Handlers. For example, when a user clicks over the browser, add js code, which will execute the task to be performed on the event. Some of the HTML events and their event handlers are:

Click Event Example: <html> <head> Javascript Events </head> <body> <script language="Javascript" type="text/Javascript"> <!-- function

Click Event Example: <html> <head> Javascript Events </head> <body> <script language="Javascript" type="text/Javascript"> <!-- function clickevent() { document. write("This is Java. Tpoint"); } //--> </script> <form> <input type="button" onclick="clickevent()" value="Who's this? "/> </form> </body> </html>

Mouse. Over Event Example <html> <head> <h 1> Javascript Events </h 1> </head> <body>

Mouse. Over Event Example <html> <head> <h 1> Javascript Events </h 1> </head> <body> <script language="Javascript" type="text/Javascript"> <!-- function mouseoverevent() { alert("This is Java. Tpoint"); } //--> </script> <p onmouseover="mouseoverevent()"> Keep cursor over me</p> </body> </html>

Focus Event Example <html> <head> Javascript Events</head> <body> <h 2> Enter something here</h 2>

Focus Event Example <html> <head> Javascript Events</head> <body> <h 2> Enter something here</h 2> <input type="text" id="input 1" onfocus="focusevent()"/> <script> <!-- function focusevent() { document. get. Element. By. Id("input 1"). style. background=" aqua"; } //--> </script> </body> </html>

Keydown Event Example <html> <head> Javascript Events</head> <body> <h 2> Enter something here</h 2>

Keydown Event Example <html> <head> Javascript Events</head> <body> <h 2> Enter something here</h 2> <input type="text" id="input 1" onkeydown="keydownevent()"/> <script> <!-- function keydownevent() { document. get. Element. By. Id("input 1"); alert("Pressed a key"); } //--> </script> </body> </html>

Load event Example <html> <head>Javascript Events</head> </br> <body onload="window. alert('Page successfully loaded'); "> <script>

Load event Example <html> <head>Javascript Events</head> </br> <body onload="window. alert('Page successfully loaded'); "> <script> <!-- document. write("The page is loaded successfully"); //--> </script> </body> </html>