Home > Developer > JavaScript
The HTML DOM gives JavaScript the ability to react to HTML events.
Instance mouse over Me Respond to EventsWe can execute JavaScript when an event occurs, such as when a user clicks on an HTML element.
To execute code when a user taps an element, add JavaScript code to an HTML event property:
onclick= JavaScriptExamples of HTML events:
In this case, when the user clicks on the
Example <! DOCTYPE html>This example calls a function from the event handler:
Example <! DOCTYPE html></body>
Try it»
If you want to assign an event to an HTML element, you can use the event properties.
InstanceTo assign the OnClick event to the button element:
<buttononclick= "displaydate ()" >try it</button>In the example above, the function named Displaydate will be executed when the button is clicked.
Use HTML DOM to assign eventsThe HTML DOM allows you to use JavaScript to assign events to HTML elements:
InstanceTo assign the OnClick event to the button element:
<script>In the example above, a function named Displaydate is assigned to the HTML element of Id=mybutn ".
The JavaScript function will be executed when the button is clicked.
OnLoad and OnUnload EventsThe onload and OnUnload events are triggered when the user enters or leaves the page.
The OnLoad event can be used to detect the browser type and browser version of the visitor and to load the correct version of the Web page based on that information.
The onload and OnUnload events can be used to process cookies.
Example <bodyonload= "checkcookies ()" >OnChange events are often used in conjunction with validation of input fields.
Here is an example of how to use onchange. The uppercase () function is called when the user changes the contents of the input field.
Instance <input type= "text" id= "FName"onchange= "uppercase ()" >The onmouseover and onmouseout events can be used to trigger a function when a user moves the mouse over an HTML element or moves out of an element.
InstanceA simple example of onmouseover-onmouseout:
Mouse over MeOnMouseDown, onmouseup, and onclick form all parts of the mouse click event. First, when the mouse button is clicked, the OnMouseDown event is triggered, and when the mouse button is released, the OnMouseUp event is triggered, and the onclick event is triggered when the mouse click is completed.
InstanceA simple example of onmousedown-onmouseup:
Thank More examplesOnMouseDown and OnMouseUp
Replace an image when the user presses the mouse button.
OnLoad
When the page finishes loading, a prompt box is displayed.
onfocus
Changes the background color of the input field when it gets focus.
Mouse events
When the pointer moves over the element, it changes its color, and when the pointer moves out of the text, it changes its color again.
JavaScript HTML DOM Events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
