Home >Web Front-end >JS Tutorial >Organize Javascript event response study notes_javascript skills

Organize Javascript event response study notes_javascript skills

WBOYOriginal: 2016-05-16 15:28:111475browse

What is an event

JavaScript creates dynamic pages. Events are behaviors that can be detected by JavaScript. Every element in a web page can generate certain events that can trigger JavaScript functions or procedures.

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 buttons.
Example: When we click the button, the onclick event is triggered 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;
 document.write("两数和为:"+sum); }
 </script>
 </head>
 <body>
 <form>
 <input name="button" type="button" value="点击提交" onclick="add2()" />
 </form>
 </body>
 </html>

Note: If you use events in a web page, set the event attribute in the element.

2. Mouse over event (onmouseover)
Mouse over event. When the mouse moves over an object, the object triggers the onmouseover event and executes the program called by the onmouseover event.
When the mouse passes the "OK" button, the message() function is called and the message dialog box pops up.

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> 鼠标经过事件 </title>
 <script type="text/javascript">
 function message(){
 confirm("请输入密码后，再单击确定!"); }
 </script>
 </head>
 <body>
 <form>
 密码:
 <input name="password" type="password" >
 <input name="确定" type="button" value="确定" onmouseover="message()"/>
 </form>
 </body>
 </html>

3. Mouse out event (onmouseout)
Mouse move event, when the mouse moves away from the current object, the program called onmouseout is executed.
When the mouse moves away from the "Click Me" button, the message() function is called and a message dialog box pops up.

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>鼠标移开事件 </title>
 <script type="text/javascript">
 function message(){
 alert("不要移开，点击后进行慕课网!"); }
 </script>
 </head>
 <body>
 <form>
 <a href="http://www.imooc.com" onmouseout="message()">点击我</a>
 </form>
 </body>
 </html>

4. Cursor focus event (onfocus)
When an object in the web page obtains focus, the program that performs the onfocus call is executed.
When the drop-down list gets focus, call the message() function, and a dialog box will pop up ""Please select your current occupation! ”.

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> 光标聚焦事件 </title>
 <script type="text/javascript">
 function message(){
 alert("请选择，您现在的职业！");
 }
 </script>
 </head>
 <body>
 请选择您的职业：<br>
 <form>
 <select name="career" onfocus="message()"> 
  <option>学生</option> 
  <option>教师</option> 
  <option>工程师</option> 
  <option>演员</option> 
  <option>会计</option> 
 </select> 
 </form>
 </body>
</html>

5. Out-of-focus event (onblur)
The onblur event and onfocus are relative events. When the cursor leaves the currently focused 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> 失焦事件 </title>
 <script type="text/javascript">
 function message(){
 alert("请确定已输入密码后，在移开!"); }
 </script> 
 </head>
 <body>
 <form>
 用户:
 <input name="username" type="text" value="请输入用户名！" >
 密码:
 <input name="password" type="text" value="请输入密码！" 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 called program will be executed.
When the text in the personal 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> 内容选中事件 </title>
 <script type="text/javascript">
 function message(){
 alert("您触发了选中事件！"); }
 </script> 
 </head>
 <body>
 <form>
 个人简介：<br>
 <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
 </body>
 </html>

7. Text box content change event (onchange)
Trigger the onchange event by changing the content of the text box, and execute the called program at the same time.

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 文本框内容改变事件 </title>
 <script type="text/javascript">
 function message(){
 alert("您改变了文本内容！"); }
 </script> 
 </head>
 <body>
 <form>
 个人简介：<br>
 <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</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 the page is loaded, the onload event is triggered, and the event is written in the 6c04bd5ca3fcae76e30b72ad730ca86d tag.
2. The loading page of this section can be understood as opening a new page.
In the following code, when a new page is loaded, a dialog box "Loading, please wait..." pops up.

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 加载事件 </title>
 <script type="text/javascript">
 function message(){
 alert("加载中，请稍等…"); }
 </script> 
 </head>
 <body onload="message()">
 欢迎学习JavaScript。
 </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 have different support for onunload events.

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 卸载事件 </title>
 <script type="text/javascript"> 
 window.onunload = onunload_message; 
 function onunload_message(){ 
  alert("您确定离开该网页吗？"); 
 } 
 </script> 
 </head>
 <body onunload="onunload_message">
 欢迎学习JavaScript。
</body>
</html>

The test results show that it is only executed in the IE browser and not in other browsers.

The above are the nine states of Javascript event response. I hope it will be helpful to everyone's learning.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery simple method to achieve gray prompt text effect in input text box_jqueryNext article：jQuery simple method to achieve gray prompt text effect in input text box_jquery

See more

Organize Javascript event response study notes_javascript skills

Related articles