What is an event
JavaScript creates dynamic pages. Events are behaviors that can be detected by JavaScript. Each element in a web page can generate certain events that can trigger JavaScript functions or programs.
1. Mouse click event (onclick)
onclick is a mouse click event, which occurs when the mouse is clicked on a web page. At the same time, the program block called by the onclick event will be executed, usually used with the button.
Example: When we click the button, the onclick event is fired and the function add2() of the sum of two numbers is called.
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
("The sum of two numbers is:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="Click to submit" onclick="add2()" />
</form>
</body>
</html>
Note: If you use an event in a web page, set the event attribute in that element.
2. Mouse over event (onmouseover)
When the mouse passes through an event, when the mouse moves to an object, the object triggers the onmouseover event and executes the program called by the onmouseover event.
When the mouse passes through the "OK" button, call the message() function and a message dialog box pops up.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Mouse passing event </title>
<script type="text/javascript">
function message(){
confirm("Please enter your password and click OK!"); }
</script>
</head>
<body>
<form>
password:
<input name="password" type="password" >
<input name="Sure" type="button" value="Sure" onmouseover="message()"/>
</form>
</body>
</html>
3. Mouseout event (onmouseout)
Mouse-removing event, when the mouse moves away the current object, executes the program called onmouseout.
When the mouse moves away from the "Click Me" button, call the message() function and a message dialog box pops up.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mouse removal event </title>
<script type="text/javascript">
function message(){
alert("Don't move away, click on MOOC!"); }
</script>
</head>
<body>
<form>
<a href="" onmouseout="message()">Click me</a>
</form>
</body>
</html>
4. Cursor focus event (onfocus)
When objects in the web page get clustered points, the program that executes the onfocus call will be executed.
When the drop-down list gets focus, call the message() function and a dialog box ""Please select your current career! ”.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Cursor Focus Event </title>
<script type="text/javascript">
function message(){
alert("Please choose your current career!");
}
</script>
</head>
<body>
Please choose your career：<br>
<form>
<select name="career" onfocus="message()">
<option>student</option>
<option>teacher</option>
<option>engineer</option>
<option>actor</option>
<option>Accounting</option>
</select>
</form>
</body>
</html>
5. Onblur event
The onblur event and onfocus are relative events. When the cursor leaves the currently acquired focus object, the onblur event is triggered and the called program is executed at the same time.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Out of focus incident </title>
<script type="text/javascript">
function message(){
alert("Please make sure you have entered your password and move it away!"); }
</script>
</head>
<body>
<form>
user:
<input name="username" type="text" value="Please enter your username!" >
password:
<input name="password" type="text" value="Please enter your password!" onblur="message()">
</form>
</body>
</html>
6. Content selection event (onselect)
Select event. When the text in the text box or text field is selected, the onselect event is triggered, and the program called at the same time will be executed.
When the text in the profile text box is selected, the onselect event is triggered and a dialog box pops up.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Content Selection Events </title>
<script type="text/javascript">
function message(){
alert("You triggered the selected event!"); }
</script>
</head>
<body>
<form>
Personal Profile：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">请写入Personal Profile，No less than200Character！</textarea>
</form>
</body>
</html>
7. Text box content change event (onchange)
The onchange event is triggered by changing the content of the text box, and the called program is executed at the same time.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Text box content change event </title>
<script type="text/javascript">
function message(){
alert("You changed the text content!"); }
</script>
</head>
<body>
<form>
Personal Profile：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入Personal Profile，No less than200Character！</textarea>
</form>
</body>
</html>
8. Loading event (onload)
The event will occur immediately after the page is loaded, and the called program will be executed at the same time.
Note: 1. When loading the page, the onload event is triggered, and the event is written in the <body> tag.
2. The loading page of this section can be understood as when a new page is opened.
As shown in the following code, when a new page is loaded, the dialog box "Loading, please wait..." pops up.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Loading Events </title>
<script type="text/javascript">
function message(){
alert("Loading, please wait..."); }
</script>
</head>
<body onload="message()">
Welcome to studyJavaScript。
</body>
</html>
9. Unload event (onunload)
When the user exits the page (page closes, page refreshes, etc.), the onUnload event is triggered and the called program is executed at the same time.
Note: Different browsers support different onunload events.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Uninstall event </title>
<script type="text/javascript">
= onunload_message;
function onunload_message(){
alert("Are you sure you leave the page?");
}
</script>
</head>
<body onunload="onunload_message">
Welcome to studyJavaScript。
</body>
</html>
The test results found that it is only executed in the IE browser, but not other browsers.
The above are nine states about Javascript event response. I hope it will be helpful to everyone's learning.