Web Development Technology--javascript HTML DOM2 (event)

Last Update:2014-12-17 Source: Internet

Author: User

Tags html form

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JavaScript HTML DOM Events

HTML DOM makes JavaScript capable of reacting to HTML events.

Respond to Events

We 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 1

In this case, when the user clicks on the

onclick="this.innerHTML=‘谢谢!‘"> Click on the Text 
Example 2
This 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 Properties
If you want to assign an event to an HTML element, you can use the event properties.
Instance
To 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 events
The HTML DOM allows you to assign events to HTML elements by using JavaScript:
Instance
To 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 Events
The 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.
Instance<body onload= "checkcookies ()" >
onchange Events
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 ()" >
onmouseover and onmouseout Events
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.
Instance
A 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 events
OnMouseDown, 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.
Instance
A 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)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More