Skip to content

Latest commit

 

History

History
123 lines (91 loc) · 3.93 KB

键盘事件.md

File metadata and controls

123 lines (91 loc) · 3.93 KB
Raw

键盘事件和焦点事件以及用户界面事件

键盘事件

键盘事件包含三个事件

  1. keydown：用户按下键盘上某个键时触发，并且持续按住会重复触发
  2. keypress：用户按下键盘上某个键并且产生字符时触发。DOM3 推荐使用 textInput，将 keypress 废弃
    • textInput 是对 keypress 的事件的扩展，用于在文本显示给用户之前更方便的获取文本输入。并且会在插入到文本框之前触发
  3. keyup：用户释放键盘上的某个键时触发
<input id="text" type="text">

键码key和char

  • DOM3 分别定义了 key 和 char（现在已废弃）两个属性，分别用来替代 keyCode 和 charCode
    • 按下字符键时，key 的值等于文本字符（如 K 或者 M）。如果按下的是非字符键，key 的值就是键名（如 Shift）

修饰键：通过 event 对象暴露。event.altKey、event.ctrlKey 等等来判断按下键是否属于这个键

  • altKey & ctrlKey & shiftKey & metakey：这个用来判断 alt ctrl 和 shift 是否被按下。如果按下则返回 true，否则返回 false

    text.addEventListener("keydown", function (e) {
  if (e.shiftKey) {
    console.log("shift");
  }
})

textInput 事件,在字符串输入到可编辑区域时触发。

  • textInput、keypress 会在任何可以获得焦点的元素上触发，对任何影响文本的键都会触发。但是 textInput 只会在可编辑区域触发并且只能在新字符被插入时触发
text.addEventListener("textInput", function (e) {
  console.log(e.data)
})

焦点事件

  • blur：当元素失去焦点时触发。不冒泡
  • focus：当元素获得焦点时触发。不冒泡
  • focusin：当元素获得焦点时触发。是 focus 的冒泡版
  • focusout：当元素失去焦点时触发。是 blur 的通用版

文本框自动获取元素

<script type="text/javascript">
function loseFocus(){
   document.getElementById('password1').blur()
}
</script>

<form>
   <input type="button" οnclick="setFocus()" value="Set focus" />
</form>

<!-- 或者直接使用autofocus -->
<input type="tel" autofocus="autofocus">

用户界面事件

  • load：在 winodw 上当页面加载完成触发.在 <frameset> 上当 <frame> 都加载完成后触发，<img> 中图片加载完成后触发，<object> 中对象加载完成后触发
  • unload：在以上所有事件对象卸载后触发
  • abort：在 <object> 元素在相应的对象加载完成前会被用户提前终止下载时触发
  • error：在以上相应的对象无法加载完成时触发
  • select：在文本框上当用户选择字符时触发
  • resize：当windows上或者窗格大小改变时触发
  • scroll：当用户滚动包含滚动条的事件时触发

load 事件

  • 在 window 对象上，load 事件会在整个页面（包括所有的外部资源图片，js 文件和 css 文件）加载完成后触发
window.addEventListener("load",(e)=>{
  console.log("load down")
})
  • 或者使用 Image 对象预先加载图片
window.addEventListener("load",()=>{
  let image = new Image()
  image.addEventListener("load",()=>{
    console.log("load down")
  })
  image.src="xxx"
})

unload 事件一般是在一个页面导航到另一个页面时触发，常用于清理从而避免内存泄漏

window.onunload= function(){
  console.log("unload")
}

resize：当浏览器窗口被缩放到新的高度或者宽度时会触发 resize 事件

window.addEventListener("resize",function(){
  console.log("resize")
})

scroll：该事件发生在 windows 上，实际反应的是页面元素的变化。

  • 一般通过 <body> 元素检测 scrollLeft 和 scrollRight 属性的变化
window.addEventListener("scroll",(e)=>{
  console.log(document.body.scrollLeft)
})