JavaScript_事件分类之焦点事件与鼠标事件

JavaScript事件分类:

• 页面事件
• 鼠标事件
• 焦点事件
• 键盘事件
• 表单事件

焦点事件：

• 多用于表单验证功能。例：文本框获聚焦点改变文本框样式，文本框失去焦点时验证文本框内输入内容

常用焦点事件：

事件名称	事件触发时机
focus	当获得焦点时触发
blur	当失去焦点时触发

• 实例操作——验证用户名和密码是否为空

  
    
    

    
  

  
    
    
      //tips用于显示错误提示信息，默认情况下隐藏，只有当文本失去焦点并未填写任何内容时显示//
    

      
用户名：
      
密　码：
      
登录
    
    
  

测试如下：

 

鼠标事件：

• 切换Tab栏显示内容，利用鼠标拖拽状态栏，调整它的显示位置，都会用到鼠标事件
• 常用鼠标事件：

  事件名称	事件触发时机
  click	按下并释放任意鼠标按键时触发
  dbclick	当鼠标双击时触发
  mouseover	当鼠标进入时触发
  mouseout	当鼠标离开时触发
  change	当内容改变时触发，一般多用于对象
  mousedown	当按下任意鼠标按键时触发
  mouseup	当释放任意鼠标按键时触发
  mouseover	在元素内当鼠标移动时持续触发

• 以下为常用鼠标属性，用来获取当前鼠标的位置信息：

位置属性（只读）	描述
clientX	鼠标指针位于浏览器页面当前窗口可视区水平坐标（x轴坐标）
clientY	鼠标指针位于浏览器页面当前窗口可视区垂直坐标（y轴坐标）
pageX	鼠标指针位于文档的水平坐标（x轴坐标），IE6~8不兼容
pageY	鼠标指针位于文档的垂直坐标（y轴坐标），IE6~8不兼容
screenX	鼠标指针位于屏幕的水平坐标（x轴坐标）
screenY	鼠标指针位于屏幕的垂直坐标（y轴坐标）

 

实例操作：

测试如下（小球会出现在鼠标点击的位置）：