Home > Developer > JavaScript
JavaScript creates dynamic pages. Events are behaviors that can be detected by JavaScript. Each element in a Web page can produce certain events that can trigger JavaScript functions or programs.
For example, when a user clicks a button or submits a form data, a mouse click (onclick) event occurs, which requires the browser to process and return a result to the user.
Main Event Table:
Mouse click event (onclick):The onclick is a mouse click event that occurs when you click the mouse on a Web page. The block that is called by the onclick event is executed and is usually used with the button.
For example, when we click the button, the onclick event is triggered, and a function called two numbers and ADD2 () is invoked. The code is as follows:
Note: in a Web page, such as using events, you set the event properties in the element.
Mouse over events (onmouseover)The mouse passes through an event, and when the mouse moves over an object, the object triggers the onmouseover event and executes the program called by the onmouseover event.
The real mouse after the "OK" button, trigger the onmouseover event, call function info (), pop-up message box, the code is as follows:
Operation Result:
Mouse Move event (onmouseout)The mouse moves the event, and executes the program that onmouseout calls when the mouse moves away from the current object.
When you move the mouse over the login button, and then move away, the onmouseout event is triggered, the function message () is called, and the code is as follows:
Operation Result:
cursor Focus event (onfocus)When an object in a Web page gets a gather point, the program executing the onfocus call is executed.
The following code, when you move the cursor inside a text box, that focus is within the text box, triggers the onfocus event and calls the function message ().
Operation Result:
lost Focus Event (onblur)The onblur event and onfocus are relative events that trigger the onblur event when the cursor leaves the current Focusable object and execute the called program.
The following code, the page has a user and password two text boxes. The current cursor is in the User text box (that is, focus is in the text box), after the cursor leaves the text box (that is, when it loses focus), the onblur event is triggered, and the function message () is called.
Operation Result:
content Check Event (onselect)
The event is selected and the Onselect event is triggered when text in a text box or text field is selected, and the program that is invoked is executed.
The following code, when the text in the User text box is selected, triggers the Onselect event and invokes the function message ().
Operation Result:
text Box content Change event (onchange)
The onchange event is triggered by altering the contents of the text box, while executing the called program.
The following code, when the user changes the text inside the box, pops up the dialog box "you changed the text content!" ”。
Operation Result:
Load Event (onload)
The event occurs immediately after the page is loaded and executes the called program.
Attention:1. When loading the page, the OnLoad event is triggered and the event is written in the <body> tag.
2. Loading the page can be understood as opening a new page.
The following code, when loading a new page, pop-up dialog "loading, please wait ..." ( Web Sina Weibo login ).Operation Result:
Unload Event (onunload)
When the user exits the page (page close, page refresh, and so on), the OnUnload event is triggered and the called program is executed.
Note: Different browsers have different support for onunload events.
The following code, when exiting the page, pops up the dialog box "Are you sure you want to leave this page?" ”。
Run Result: (IE browser)
—————————————————————————————————————————————————————————
The above content is referenced from the MU Net: http://www.imooc.com
JavaScript knowledge Note (ii)--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
