Loading Please Wait...
HTML DOM allows JavaScript to react to HTML events
A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.
To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute.
onclick = JavaScript
In this example, the content of the <p> element is changed when a user clicks on it.
<html>
<body>
<p onclick="this.innerHTML = 'Ooops!'">Click on this text!</p>
</body>
</html>
In this example, a function is called from the event handler.
<html>
<body>
<p onclick="changeText(this)">Click on this text!</p>
</body>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</html>
To assign events to HTML elements you can use event attributes.
In this example, an onclick event is assign to a button element.
<button onclick="displayDate()">Try it</button>
The HTML DOM allows you to assign events to HTML elements using JavaScript.
In this example, a function named displayDate is assigned to an HTML element with the id="myBtn".
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
The onload and onunload events are triggered when the user enters or leaves the page.
The onload event can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.
The onunload event occurs once a page has unloaded (or the browser window has been closed).
The onload and onunload events can be used to deal with cookies.
<body onload="myFunction()">
// OR
<body onunload="myFunction()">
The onchange event is often used in combination with validation of input fields.
Below is an example of how to use the onchange. The upperCase() function will be called when a user changes the content of an input field.
<input type="text" id="fname" onchange="upperCase()">
The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element:
<div onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div>
The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.
<div onmousedown="mDown(this)" onmouseup="mUp(this)">Mouse Over Me</div>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved