JavaScript学习笔记06【高级——JavaScript中的事件】

• w3school 在线教程：https://www.w3school.com.cn

1. JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】【day01】
2. JavaScript学习笔记02【基础——对象（Function、Array、Date、Math、RegExp、Global）】【day01】
3. JavaScript学习笔记03【基础——对象（RegExp、Global）】【day01】
4. JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】【day02】
5. JavaScript学习笔记05【高级——DOM对象】【day02】
6. JavaScript学习笔记06【高级——JavaScript中的事件】【day02】

目录

10 JavaScirpt中的事件

事件_概述

HTML DOM Event 对象

事件_常见事件演示

1、失去焦点事件

2、加载完成事件

3、绑定鼠标事件

4、键盘事件

5、选择和改变事件

6、表单事件

常见事件演示-代码

案例5_表格全选

Checkbox 对象的属性

案例6_表单检验

HTML DOM Text 对象

---

10 JavaScirpt中的事件

事件_概述

* 概念：某些组件被执行了某些操作后，触发某些代码的执行。    
    * 事件：某些操作。如： 单击、双击、键盘按下了、鼠标移动了 ...
    * 事件源：组件。如： 按钮、文本输入框 ...
    * 监听器：代码。
    * 注册监听：将事件、事件源、监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件：
    1. 点击事件：
        1. onclick：单击事件
        2. ondblclick：双击事件

    2. 焦点事件
        1. onblur：失去焦点。
            * 一般用于表单验证
        2. onfocus:元素获得焦点。

    3. 加载事件：
        1. onload：一张页面或一幅图像完成加载。

    4. 鼠标事件：
        1. onmousedown    鼠标按钮被按下。
            * 定义方法时，定义一个形参，接受event对象。
            * event对象的button属性可以获取鼠标按钮键被点击了。
        2. onmouseup    鼠标按键被松开。
        3. onmousemove    鼠标被移动。
        4. onmouseover    鼠标移到某元素之上。
        5. onmouseout    鼠标从某元素移开。

    5. 键盘事件：
        1. onkeydown    某个键盘按键被按下。
        2. onkeyup        某个键盘按键被松开。
        3. onkeypress    某个键盘按键被按下并松开。

    6. 选择和改变
        1. onchange    域的内容被改变。
        2. onselect    文本被选中。

    7. 表单事件：
        1. onsubmit    确认按钮被点击。
            * 可以阻止表单的提交
                * 方法返回false则表单被阻止提交。
        2. onreset    重置按钮被点击。

HTML DOM Event 对象

事件_常见事件演示

1、失去焦点事件

2、加载完成事件

3、绑定鼠标事件

  

4、键盘事件

  

5、选择和改变事件

6、表单事件

常见事件演示-代码

	
		
		
		
	
	
		
		

			
			
				--请选择--
				北京
				上海
				西安
			
			
		
	

案例5_表格全选

分析：
    1.全选：
        * 获取所有的checkbox
        * 遍历cb，设置每一个cb的状态为选中状态：checked

	
		
		
		
		
	
	
		

			
学生信息表
			

				

				
编号
				
姓名
				
性别
				
操作
			
			

				

				
1
				
令狐冲
				
男
				
删除
			
			

				

				
2
				
任我行
				
男
				
删除
			
			

				

				
3
				
岳不群
				
?
				
删除
			
		
		

			
			
			
		
	

Checkbox 对象的属性

案例6_表单检验

  

分析：
    1.给表单绑定onsubmit事件，监听器中判断每一个方法校验的结果。
        如果都为true，则监听器方法返回true
        如果有一个为false，则监听器方法返回false
    2.定义一些方法分别校验各个表单项。
    3.给各个表单项绑定onblur事件。

    
    
    
    


    

        

            
新用户注册
            
USER REGISTER
        
        

            

                
                

                    

                        

                            
用户名
                            

                                
                                
                            
                        
                        

                            
密码
                            

                                
                                
                            
                        
                        

                            
Email
                            

                        
                        

                            
姓名
                            

                        
                        

                            
手机号
                            

                        
                        

                            
性别
                            

                                 男
                                 女
                            
                        
                        

                            
出生日期
                            

                            
                        
                        

                            
验证码
                            

                                
                            
                        
                        

                            

                        
                    
                
            
        
        

            
已有账号?立即登录
        
    

HTML DOM Text 对象