Web Development Technology--javascript HTML DOM2 (event)

Source: Internet
Author: User
Tags html form

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.