js 自定义事件

<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<style>
  .button {
       200px;
      height: 200px;
      background-color: antiquewhite;
      margin: 20px;
      text-align: center;
      line-height: 200px;
  }
</style>
</head>
<body>
<div class="button">Button</div>
<script>
  "use strict";
  var btn = document.querySelector('.button');
  var ev = new Event('test', {
      bubbles: 'true',
      cancelable: 'true'
  });
  btn.addEventListener('test', function (event) {
      console.log(event.bubbles);
      console.log(event.cancelable);
      console.log(event.detail);
  }, false);
  btn.dispatchEvent(ev);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<style>
  .button {
       200px;
      height: 200px;
      background-color: antiquewhite;
      margin: 20px;
      text-align: center;
      line-height: 200px;
  }
</style>
</head>
<body>
<div class="button">Button</div>

<script>
  "use strict";
  var btn = document.querySelector('.button');

  var ev = new CustomEvent('test', {
      bubbles: 'true',
      cancelable: 'true',
      detail: 'tcstory'
  });
  btn.addEventListener('test', function (event) {
      console.log(event.bubbles);
      console.log(event.cancelable);
      console.log(event.detail);
  }, false);
  btn.dispatchEvent(ev);
</script>
</body>
</html>

相关阅读:
SQL Server 【应用】行列转换Pivot&Unpivot
SQL Server 【优化】in & exists & not in & not exists
SQL Server 【提高】死锁
SQL Server 【提高】锁
SQL Server 【提高】游标
.Net 【基础回顾】关键字
.Net 【基础回顾】值类型与引用类型
mysql中point类型数据的操作
CGI环境配置（Ubuntu）
CGI环境配置（CentOS）

原文地址：https://www.cnblogs.com/gaocong/p/7844634.html