# HTML5事件

# 1. contextMenu 事件(鼠标右键)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./event.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
    }

    .mydiv {
      background: green;
    }

    .menu {
      visibility: hidden;
      position: absolute;
      background: purple;
    }
  </style>
</head>

<body>
  <div class="mydiv">点我</div>
  <div class="menu">haha </div>
</body>
<script>
  let myDiv = document.getElementsByClassName('mydiv')[0];
  let myMenu = document.getElementsByClassName('menu')[0]
  eventUtil.addHandler(window, 'load', function (event) {
    eventUtil.addHandler(myDiv, 'contextmenu', function (event) {
      event = eventUtil.getEvent(event);
      event.preventDefault();

      myMenu.style.left = event.clientX + 'px';
      myMenu.style.top = event.clientY + 'px';
      myMenu.style.visibility = 'visible';
    })

    eventUtil.addHandler(document, 'click', function (e) {
      myMenu.style.visibility = 'hidden';
    })
  })
</script>

</html>
  1. contextmenu 事件表示何时在哪里显示上下文菜单。
  2. 事件会冒泡。
  3. 通常 contextmenu 显示菜单,click 取消菜单。
  4. 实现步骤
    1. 指定显示的元素绑定 contextmenu 事件。
    2. 取消默认行为,不显示浏览器的默认上下文菜单。
    3. 根据 event 对象的客户端坐标定义自定义菜单的位置。
    4. 让菜单显示。修改 display 值或者 visibility。
    5. 点击 document,让菜单不显示。

# 2 beforeunload事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=ß, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./event.js"></script>
</head>

<body>
  <input type="text">
  <script>
    eventUtil.addHandler(window, 'beforeunload', function (event) {
      event = eventUtil.getEvent(event);
      var message = '关闭提示';
      //ie 和 firefox 设置 returnValue 的值
      event.returnValue = message;
      //Safari 和 google 直接返回
      return message
    })
  </script>
</body>

</html>

现在浏览器为了优化用户体验,对onbeforeunload 的离开页面提示做出了限制。 比如最新版的谷歌浏览器,必须要有用户在页面上有点击等操作之后再离开页面才能有提示,如果页面打开后没有用户在页面上点击等操作就离开(关闭)页面就不会有提示。 另外一般的ide或代码编辑器内嵌浏览器离开(关闭)页面也不会有提示

# 3 DOMContentLoaded 事件

在形成完整的 DOM 树之后触发,不理会图像、javascript 文件、css 文件或者其他资源是否已经下载完毕。支持在页面下载的早期添加事件处理程序,意味着用户可以尽早的与页面进行交互。 可以给 window 或者 document 添加事件绑定程序。会冒泡到 window,但实际目标是 document。 不支持该事件的浏览器,可设置一个事件为 0 毫秒的超时调用,但事件被触发的时间能否同步,还是取决于用户的浏览器和页面中的其他代码,无法保证在所有环境中该超时调用一定会早于 load 事件触发。

# 4 readystatechange 事件

提供与文档或元素的加载状态有关的信息,但这个事件的行为有时候会很难预料。

# 5 pageshow 和 pagehide 事件

pageshow 触发时机

  1. 首次加载页面,load 事件之后触发
  2. 目标是 document,但必须将其事件处理程序添加到 window 上。
  3. 点击前进或后退,显示来自 back-forward cache 中的页面时。
  4. 检测 event 中的 persisted 属性判断是否来自 bfcache。

pagehide 触发时机

  1. unload 事件触发之前触发。
  2. 目标是 document,事件处理程序需要添加到 window 对象上。
  3. 页面卸载时,persisted 会变成 true (除非页面不会被保存在 bfcache 中)。

# 6 hashchange 事件

当 url 的参数列表发生变化时,包括 hash 值,发生变化时通知开发人员。

  1. 必须把事件处理程序添加给 window 对象。
  2. event 对象包括 oldUrl 和 newUrl 两个值,包括变化前后的完整链接。为了兼容性,最好还是使用 location 对象确定当前的参数列表。