JavaScript knowledge notes (2) -- events and javascript notes

Source: Internet
Author: User

JavaScript knowledge notes (2) -- events and javascript notes
Event:

JavaScript creates a dynamic page. Events are behaviors that can be detected by JavaScript. Each element in the web page can generate events that can trigger JavaScript Functions or programs.

For example, when a user clicks a button or submits form data, an onclick event occurs. The browser must process the event and return a result to the user.

Main Event table:

Click an event (onclick ):

Onclick is an event that occurs when you click the mouse on a webpage. At the same time, the block called by the onclick event will be executed and usually used together with the button.

For example, when you click a button, The onclick event is triggered and two numbers and the add2 () function are called (). The Code is as follows:

<Html> 

Note:If you use an event on a webpage, you can set the event attribute in the element.

Mouse over event (onmouseover)

When the mouse moves over an object, the onmouseover event is triggered and the program called by the onmouseover event is executed.

When the real mouse goes through the "OK" button, the onmouseover event is triggered and the function info () is called. The message box is displayed. The Code is as follows:

Running result:

Onmouseout)

When the mouse moves the current object, the program called onmouseout is executed.

When you move the mouse over the "Log on" button and then remove it, The onmouseout event is triggered and the Function message () is called. The Code is as follows:

Running result:

 

Onfocus)

When an object in the webpage obtains a clustering point, the program that executes the onfocus call will be executed.

The following code triggers the onfocus event and calls the function message () when the cursor is moved to the text box, that is, the focus is in the text box ().

Running result:

Focal loss event (onblur)

The onblur event and onfocus event are relative events. When the cursor leaves the current focused object, the onblur event is triggered and the called program is executed.

The following code shows the user and Password text boxes on the webpage. When the current cursor is in the user text box (that is, the focus is in the text box), after the cursor leaves the text box (that is, when the focus is lost), The onblur event is triggered and the Function message () is called ().

Running result:

Content Selection event (onselect)

Selected event. When the text in the text box or text field is selected, the onselect event is triggered and the called program is executed.

The following code triggers the onselect event and calls the function message () when the text in the user text box is selected ().

Running result:

Onchange)

The onchange event is triggered by changing the content of the text box and the called program is executed at the same time.

The following code changes the text in the text box. The dialog box "you changed the text!" is displayed !".

Running result:

Onload)

The event occurs immediately after the page is loaded and the called program is executed.
Note:

1. When a page is loaded, the onload event is triggered and the event is written in the <body> label.

2. Load the page, which can be understood as when a new page is opened.
The following code: when loading a new page, the dialog box "loading..." appears ..." (Log on to Sina Weibo on the webpage ).

Running result:

Onunload)

When the user exits the page (the page is closed, the page is refreshed, etc.), the onUnload Event is triggered, and the called program is executed at the same time.

Note: different browsers support different onunload events.

The following code pops up when you exit the page: Are you sure you want to leave the page ?".

Running result: (IE browser)

---------------------------------------------------------

The above content refer to self MOOC Network: http://www.imooc.com

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.