JavaScript 事件类型（键盘事件，鼠标事件，焦点事件）

小鱼儿 2023-01-16 03:29 99阅读 0赞

*  键盘事件
 *  鼠标事件
 *  焦点事件

#### 键盘事件 ####

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>发生时机</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onkeydown</td> 
   <td>键盘按键按下</td> 
  </tr> 
  <tr> 
   <td>keypress</td> 
   <td>键盘按键按住</td> 
  </tr> 
  <tr> 
   <td>keyup</td> 
   <td>键盘按键松开</td> 
  </tr> 
 </tbody> 
</table>

**监听某个按键事件**

**event参数**  
该参数为 `KeyboardEvent` 事件对象，其中包含按键相关的一些属性。

*  `type`：事件类型
 *  `key`：表示按下的键盘内容是什么即键值，按下字母 ‘p’ 时，值为’p’
 *  `code`：表示键盘代码，按下字母 ‘p’ 时，值为 ‘KeyP’
 *  `keyCode`：整数，表示键码，每个键都有唯一的键码，字母 ‘p’ 的键码为80
 *  `altKey`：布尔值，表示此时的 alt 键是否也按下
 *  `ctrKey`：布尔值，表示此时的 ctr 键是否也按下
 *  `shiftKey`：布尔值，表示此时的 shift 键是否也按下
 *  `metaKey`：布尔值，windows 平台表示 Window 键是否同时按下，mac表示Command键是否同时按下
 *  `repeat`: 布尔值，如果一个键一直被按着，则其值为true，表示重复

可以通过检查这些属性来判断用户按下的是什么键，以及是否 ctrl 和 alt 等键是否同时按下:

#### 鼠标事件 ####

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>发生时机</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onclick</td> 
   <td>鼠标单击对象时触发的事件</td> 
  </tr> 
  <tr> 
   <td>ondblclick</td> 
   <td>鼠标双击对象时触发的事件</td> 
  </tr> 
  <tr> 
   <td>onmousedown</td> 
   <td>鼠标按钮被按下时触发的事件</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>鼠标被移动时触发的事件</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>鼠标离开监听该事件的元素或子元素时触发的事件</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>鼠标移动到监听该事件的元素或子元素时触发的事件</td> 
  </tr> 
  <tr> 
   <td>onmouseup</td> 
   <td>鼠标按键被松开时触发的事件</td> 
  </tr> 
 </tbody> 
</table>

**示例：**

触发时的参数为 MouseEvent 对象类型，MouseEvent对象中包含下面比较有用的属性：

*  `type`: 事件类型，如 `mosemove` 或者`mousedown`
 *  `button`：整型，触发鼠标事件时按下的按钮编号
 *  `buttons`：整型，触发鼠标事件时弹起来的按钮编号
 *  `clientX`：鼠标指针在 DOM 内容区的X坐标
 *  `clientY`：鼠标指针在 DOM 内容区的Y坐标
 *  `offsetX`：鼠标指针相对父节点填充边缘的X坐标
 *  `offsetY`: 鼠标指针相对父节点填充边缘的Y坐标
 *  `screenX`: 鼠标指针在全局屏幕的X坐标
 *  `screenY`: 鼠标指针在全局屏幕的Y坐标
 *  `pageX`: 鼠标指针在整个DOM内容（包括分页）的X坐标
 *  `pageY`: 鼠标指针在整个DOM内容（包括分页）的Y坐标
 *  `altKey`: 布尔值，表示此时的alt键是否也按下
 *  `ctrKey`: 布尔值，表示此时的alt键是否也按下
 *  `shiftKey`: 布尔值，表示此时的shift键是否也按下
 *  `metaKey`: 布尔值，windows平台表示Window键是否同时按下，mac表示Command键是否同时按下

**示例**:点击鼠标右键，弹出div

#### 焦点事件 ####

不是所有元素都有焦点事件，只有可交互性的元素才有，比如表单元素，a标签。页面中只能有一个元素有焦点，一个聚焦，另一个就失焦，默认在document。

form.txt1.focus();    // 让元素获得焦点，该方法不会触发onfocus（）事件。
    form.txt1.onfocus=function(){ 
        console.log(1);
    }  // 元素获得焦点时会触发该事件
    form.txt1.onblur=function(){ 
        console.log(2);
    }　　//元素失去焦点时触发该事件
    form.btn.onclick=function(){ 
        form.txt1.select(); 
    }  //选中输入框中的所有文字
    form.btn.onclick=function(){  
        form.txt1.setSelectionRange(2,5) ; 
        form.txt1.focus(); 
    } // setSelectionRange需要配合着focus()使用才看得到效果，其中setSelectionRange的结束位置不包含在内，setSelectionRange（start，end）包含两个参数，一个是start：起始位置；一个是end：结束位置。