JavaScript DOM 事件

桃扇骨 2022-05-29 10:20 194阅读 0赞

### 文章目录 ###

*   *  事件流 - 从页面中接受事件的顺序
     *  HTML事件处理
     *  DOM0级事件处理
     *  DOM2级事件处理
     *  获取事件类型
     *  获取事件目标
     *  阻止事件冒泡 \`stopPropagation()\`
     *  阻止默认行为 \`preventDefault()\`
     *  事件属性兼容
     *  定时器（异步非IO）
     *  IE事件处理及跨浏览器解决方案
     *  常见事件类型
     *  键码对应表

> [https://wildye.cn/posts/4ce9c398/][https_wildye.cn_posts_4ce9c398]

## 事件流 - 从页面中接受事件的顺序 ##

*  事件冒泡  
    即事件最开始由具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播至最不具体的那个节点（文档）
 *  事件捕获  
    与冒泡相反

## HTML事件处理 ##

## DOM0级事件处理 ##

el.onclick = function(){ conlose.log("DOM0级事件") }; el.onclick = null;

## DOM2级事件处理 ##

el.addEventListener('clink',fn) //绑定事件 el.removeEventListener('click',fn) //解绑事件 // IE支持的方法 el.attachEvent('onclick',fn) //绑定事件 el.detachEvent('onclick',fn) //解绑事件

## 获取事件类型 ##

event.type

## 获取事件目标 ##

event.target event.srcElement // IE

## 阻止事件冒泡 `stopPropagation()` ##

event.stopPropagation() // IE 独有，设置true表示阻止冒泡，false不阻止 event.cabncelBubble = true

## 阻止默认行为 `preventDefault()` ##

event.preventDefault() // IE 独有，设置false表示阻止 event.returnValue = false

## 事件属性兼容 ##

//兼容 火狐 谷歌 IE9之前 var e = e || event || window.event; //按键 var keycode = e.keyCode || e.which

## 定时器（异步非IO） ##

*  在指定时间后执行一次，time 单位为毫秒 ms

setTimeout(function(){ }, time)

*  以指定时间为周期循环执行

setInterval(function(){ }, time)

## IE事件处理及跨浏览器解决方案 ##

## 常见事件类型 ##

<table> 
 <thead> 
  <tr> 
   <th>事件类型</th> 
   <th>事件说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click</td> 
   <td>单击</td> 
  </tr> 
  <tr> 
   <td>dblclick</td> 
   <td>双击</td> 
  </tr> 
  <tr> 
   <td>contextmenu</td> 
   <td>右击</td> 
  </tr> 
  <tr> 
   <td>mouseover</td> 
   <td>鼠标移入</td> 
  </tr> 
  <tr> 
   <td>mousemove</td> 
   <td>鼠标移动</td> 
  </tr> 
  <tr> 
   <td>mouseout</td> 
   <td>鼠标移除</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>获取焦点</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>表单元素发生了输入，比change更频繁</td> 
  </tr> 
  <tr> 
   <td>change</td> 
   <td>表单内容或状态发生改变，完成改变后触发</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>失去焦点</td> 
  </tr> 
  <tr> 
   <td>keydown</td> 
   <td>键盘按键被按下</td> 
  </tr> 
  <tr> 
   <td>keyup</td> 
   <td>按键弹起</td> 
  </tr> 
  <tr> 
   <td>keypress</td> 
   <td>按下、只响应字符</td> 
  </tr> 
 </tbody> 
</table>

## 键码对应表 ##

<table> 
 <thead> 
  <tr> 
   <th>keyCode</th> 
   <th>对应键位</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>37</td> 
   <td>左</td> 
  </tr> 
  <tr> 
   <td>38</td> 
   <td>上</td> 
  </tr> 
  <tr> 
   <td>39</td> 
   <td>右</td> 
  </tr> 
  <tr> 
   <td>40</td> 
   <td>下</td> 
  </tr> 
  <tr> 
   <td>13</td> 
   <td>Enter 回车</td> 
  </tr> 
  <tr> 
   <td>32</td> 
   <td>space 空格</td> 
  </tr> 
  <tr> 
   <td>27</td> 
   <td>Esc</td> 
  </tr> 
  <tr> 
   <td>65 ~ 90</td> 
   <td>A ~ Z</td> 
  </tr> 
  <tr> 
   <td>48 ~ 57</td> 
   <td>0 ~ 9</td> 
  </tr> 
  <tr> 
   <td>96 ~ 105</td> 
   <td>小键盘 0 ~ 9</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td>Tab</td> 
  </tr> 
  <tr> 
   <td>20</td> 
   <td>CapsLock 大小写切换</td> 
  </tr> 
  <tr> 
   <td>16</td> 
   <td>Shift</td> 
  </tr> 
  <tr> 
   <td>17</td> 
   <td>Ctrl</td> 
  </tr> 
  <tr> 
   <td>18</td> 
   <td>Alt</td> 
  </tr> 
 </tbody> 
</table>

[https_wildye.cn_posts_4ce9c398]: https://wildye.cn/posts/4ce9c398/