DOM事件速记（四）

灰沙
205 阅读4分钟

HTML5事件

  1. contextmenu
    表示何时应该显示上下文菜单，以便开发人员取消默认菜单而提供自定义菜单，这个是冒泡的

自定义菜单示例

<div id="myDiv">Click Me !!!</div>
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver">
	<li><a href="https://www.baidu.com">baidu</a><li>
	<li><a href="https://zhanghang12135.github.io">My blog</a><li>
	<li><a href="https://www.iqiyi.com">aiqiyi</a><li>
</ul>

window.addEventListener("load",function(event){
    let div = document.getElementById("myDiv");
    document.addEventListener("contextmenu",function(event){
    	event.preventDefault();
    let menu = document.getElementById("myMenu");
    	menu.style.left = event.clientX+"px";
    	menu.style.top = event.clientY+"px";
    	menu.style.visibility = "visible";
    });
    document.addEventListener("click",function(event){
    	document.getElementById("myMenu").style.visibility = "hidden";
    });
})
  1. beforeunload
    浏览器卸载页面之前触发。就是那种关闭网页的提示消息。
    要想显示这个对话框，必须设置event.returnValue的值为显示给用户的字符串，同时作为函数的值返回。
window.addEventListener("before",function(event){
    let message = "要显示的字符串"：
    event.returenValue = message;
    return message;
},false)

不过到现在，基本上不能显示自定义的字符串，全是通用的字符串

从Firefox 4、 Chrome 51、Opera 38 和Safari 9.1开始，通用确认信息会代替事件返回的字符串。

  1. DOMContentLoaded
    形成完整的DOM树之后就会触发之后就会触发，可冒泡,可以为document或者window添加事件处理，实际目标仍然是document.
    通常这个事件在load事件之间触发 对于不支持DOMContentLoaded事件的浏览器，可以在页面加载期间设置一个时间为0 的超时调用
setTimeout(function(){
    //事件处理程序
}，0);

表示，在当前js处理完成后立即运行这个函数。在页面下载和构建期间，只有一个js处理过程，因此超时调用会在该过程结束时立即调用。尽管如此，还是无法保证所有环境该超时调用一定会早于load事件

  1. readystatechange
    目的是提供与文档或加载状态有关的信息
  • uninitialized(未初始化)：对象存在但尚未初始化
  • loading(正在加载)：对象正在加载数据
  • loaded(加载完毕)：对象加载数据完成
  • interactive(交互)：可以操作对象
  • complete(完成)：对象已经加载完毕

但是存在一个很大的问题，对象可能不会完全都是这样的，所以不建议使用，而且只有IE支持

  1. pageshow和pagehide
    FireFox和Opera有一个特性，叫“往返缓存”(back-forward cache或者bfcache).将整个页面都保存在了内存中。如果打开存在bfcache中的内存，不会触发load事件
    在重新加载页面中,pageshow会在load触发后触发，而对于bfcache中的页面，会在页面状态完全恢复的那一刻触发
    尽管这个事件到的目标是document,但必须将其添加到window对象中
    该事件存在属性persisted,保存在bfcache中时，值为true;不在时，值为false. pagehide事件前者相对应，该事件会在浏览器卸载页面时触发 基本现在主流浏览器都支持。
  2. haschange
    URL参数发生变化时，触发,event包含oldURL和newURL两个属性

设备事件

  1. orientationchage:当用户改变设备查看模式时触发
  • 0 肖像模式，竖屏
  • 90 左侧横屏
  • -90 右侧横屏
  1. MozOrientation:FireFox特有，当设备的加速计检测到设备方向改变时触发
  2. deviceorientation：加速计变化时，在window上触发。主要是告诉开发人员设备在空间中朝向哪。
  3. devicemotion：检测设备是不是往下掉，或者被人拿着走路

触摸事件和手势事件

  1. 触摸事件

    • touchstart:手指触摸屏幕时触发
    • touchmove:当手指在屏幕上滑动时连续地触发，在这个事件发生期间，调用preventDefault()可以阻止滚动
    • touchend:当手指从屏幕上移开时触发
    • touchcancel:当系统体制触摸时触发。
      每一个触摸事件都包含这三个属性
    • touches:表示当前跟踪的触摸操作的Touch对象数组
    • targetTouchs:特定与事件目标的Touch对象的数组
    • changeTouches:表示自上次触摸以来发生了什么改变的Touch对象数组
      每一个Touch对象属性
    • clienX:触摸目标在视口中的x坐标
    • clienY：触摸目标在视口中的y坐标
    • identifier:标识触摸的唯一ID
    • pageX：触摸目标在页面中的x坐标
    • pageY: 触摸目标在页面中的y坐标
    • screenX:触摸目标在屏幕中x坐标
    • screenY：触摸目标在屏幕中的y坐标
    • target:触摸的DOM节点
      触摸一次发生的事件顺序
    • touchstart
    • mouseover
    • mousemove
    • mousedown
    • mouseup
    • click
    • touchend

  2. 手势事件

    • gesturestart: 当一个手指按在屏幕上，另一个手指又触摸屏幕时触发
    • gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发
    • gestureend:当任何一个手指从屏幕上移开时触发
avatar
文章
阅读
粉丝