DOM速记（二）

灰沙
363 阅读4分钟

事件类型

Web浏览器可能发生很多事件。DOM3规定了如下几类事件

UI事件

当用户与页面上的元素交互时触发

  1. load事件
    当页面完全加载（所有图像，js文件，css文件等外部资源 ）后就会触发window上面的load事件
<img src="logo.icon" onload="alert('logo loaded!')">

//js实现
let img = document.querySeletor("#myImg");
img.addEventListener("load",function(event){
    alert('logo loaded!');    
},false)

  1. unload事件
    与load对应，文档被完全卸载后触发。用户从一个页面切换到另一个页面就会发生unload事件。一般应用于清除应用，以避免内存泄漏

  2. resize事件
    当浏览器窗口被调整到一个新的高度或或宽度时，就会触发resize事件
    事件在window上触发，可通过body的onresize特性来指定事件处理函数，一般还是用js

  3. scroll事件
    window对象上触发，混杂模式下可通过body元素的scrollLeft和scrollTop来监控这一变化；标准模式除Safair之外的会根据html元素来反映变化

焦点事件

当元素获得或失去焦点时触发

  • blur: 在元素试去焦点时触发，这个事件不会冒泡，所有浏览器都支持它
  • DOMFocusIn:在元素获得焦点时触发（only Opera），等价于focus,DOM3已废弃选择了focusin
  • DOMFocusOut:在元素失去焦点时触发（only Opera）,blur的通用版本；DOM3已废弃，选择了focusout
  • focus：在元素获得焦点时触发，不冒泡，所有浏览器都支持
  • focusin:在元素获得焦点时触发，冒泡
  • focusout:在元素失去焦点时触发，冒泡

利用这些事件并于document.hasFoucus()和document.activeElement属性配合，可以知晓用户在页面上的行踪
当焦点从一个元素到另一个元素时，触发的事件顺序

  1. focusout 在失去焦点的元素上触发
  2. focusin 在获得焦点的元素上触发
  3. blur 在失去焦点的元素上触发
  4. DOMFocusOut 在失去焦点的元素上触发
  5. focus 在获得焦点的元素上触发
  6. DOMFOcusIn 在获得焦点的元素上触发

鼠标事件

当用户通过鼠标在页面上执行操作时触发

  1. click事件 用户单击主鼠标键（一般为左键）或者按下回车键
  2. dbclick事件 用户双击主鼠标键
  3. mousedown 用户按下任意鼠标按键时触发
  4. mouseenter 鼠标光标从元素外部首次移动到元素范围之内时触发，不冒泡，而且在光标移动到后代元素上不会触发
  5. mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发，不冒泡，而且在光标移到到后代元素上不会触发
  6. mousemove 当鼠标指针在元素内部移动时重复地触发
  7. mouseout 鼠标从一个元素移入到另一个元素，事件的主目标是失去光标的元素
  8. mouseover 鼠标从一个元素外部，首次移入到另一个元素边界之内时触发，事件的主目标是获得光标的元素
  9. mouseup 用户释放鼠标按钮时触发

点击事件触发顺序

  • mousedown
  • mouseup
  • click
  • mousedown
  • mouseup
  • dbclick

鼠标事件中存在的部分属性

  • clientX 鼠标指针在视口的水平坐标
  • clientY 鼠标指针在视口的垂直位置
  • pageX 页面水平位置
  • pageY 页面垂直位置
    在没有滚动的清空下clientX == pageX
  • screenX 相对于屏幕的水平坐标
  • screenY 相对于屏幕的垂直坐标
  • shiftKey（shift键）,ctrlKey（ctrl键）,altKey（alt键）,metaKey(windows中是win键，mac中是Cmd键)，true表示这些键被按下
  • button 0表示主键（左），1表示滚轮，2表示次键（右），这个对于IE需要做兼容处理
  • detail 对于点击事件，表示点击次数，前提是鼠标不移动

滚轮事件

当用户使用鼠标滚轮（或类似设备）时触发

  1. mousewheel事件 用户通过鼠标滚轮与页面交互，在垂直方向上滚动页面时，就会触发，最终会冒泡到document(IE8)或者window(IE9,Opera,Chrome,Safari)
  • mouseDelta属性 向前滚动时，120的倍数;向后滚动时，-120的倍数
    Opera9.5之前正好是相反的，估计也没这么老的机子了，现在Opera都60了
    Firefox支持一个DOMMouseScroll事件,信息保存在detail属性中是3的倍数和-3的倍数

触摸设备注意事项

iOS和Android

  • 不支持dbclick.双击会放大浏览器
  • 轻击可单击元素（绑定onclick,或者链接等）会触发mouseover事件；如果屏幕没有变化，依次触发mousedown,mouseup,click;轻击不可单击元素不会触发任何事件
  • mousemove事件也会触发mouseover,mouseout
  • 两个手指放在屏幕上且随手指移动而滚动时会触发mousewheel和scroll事件
  • 对于特殊人群，尽量用click来处理点击事件
avatar
文章
阅读
粉丝