Home > Developer > JavaScript
HTML DOM makes JavaScript capable of reacting to HTML events.
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=JavaScript
Examples of HTML events:
· When the user clicks the mouse
· When the page is loaded
· When the image is loaded
· When the mouse moves over the element
· When the input field is changed
· When you submit an HTML form
· When the user triggers the button
Example 1In this case, when the user clicks on the
Example 2onclick="this.innerHTML=‘谢谢!‘"> Click on the TextThis example calls a function from the event handler:
<!DOCTYPE HTML><HTML><Head> <Script>functionChangetext (ID) {id.innerhtml="Thank you!";}</Script></Head><Body> <H1onclick= "Changetext (this)">Please click on the text</H1></Body></HTML>HTML Event PropertiesIf 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:
<button onclick= "displaydate ()" > click here </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 assign events to HTML elements by using JavaScript:
InstanceTo assign the OnClick event to the button element:
< Script > document.getElementById ("mybtn"). onclick = function () {displaydate ()}; </ Script >In the example above, a function named Displaydate is assigned to the HTML element of Id=mybutn ".
The function is 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.
Instanceonchange Events<body onload= "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.
Instanceonmouseover and onmouseout Events<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:
<!DOCTYPE HTML><HTML> <Body> <Divonmouseover= "MOver (this)"onmouseout= "Mout (this)"style= "Background-color: #D94A38; width:200px;height:50px;padding-top:25px;text-align:center;">Mouse over Me</Div> <Script> functionmOver (obj) {obj.innerhtml="Thank you" } functionmout (obj) {obj.innerhtml="move the mouse pointer over the top" } </Script> </Body></HTML>OnMouseDown, onmouseup, and onclick eventsOnMouseDown, 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:
<!DOCTYPE HTML><HTML> <Body> <Divonmousedown= "MDown (this)"onmouseup= "MUp (this)"style= "Background-color: #D94A38; width:200px;height:50px;padding-top:25px;text-align:center;">Click here</Div> <Script> functionMDown (obj) {obj.style.backgroundColor="#1ec5e5"; Obj.innerhtml="Release Mouse" } functionmUp (obj) {obj.style.backgroundColor="#D94A38"; Obj.innerhtml="Thank you" } </Script> </Body></HTML>Web Development Technology--javascript HTML DOM2 (event)
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
