自定义事件

自定义事件

自定义事件主要会被用于框架、组件设计与实现中。

 

自定义的事件有许多的创建方式，但实际的业务场景中几乎不会被用到，网络上的文献记载其具体的使用场景也相对较少。

 

1. 使用 Event 构造函数

使用 Event 构造函数就可以创建一个自定义事件。

 

实例演示

预览

复制

<style>

  .btn { border: 1px solid #4caf50; padding: 8px 12px; min-width: 200px; color: #4caf50; background: white; outline: none; }

  .btn:active { background: #4caf50; color: white; }

</style>

 

<div>

  <button class="btn">点击我</button>

</div>

 

<script>

  var afterClick = new Event('afterclick');

 

  var btnEle = document.querySelector('.btn');

 

  btnEle.addEventListener('afterclick', function() {

    alert('我是点击事件执行完后做的事情');

  });

 

  btnEle.onclick = function() {

    alert('我被点击了');

 

    this.dispatchEvent(afterClick);

  };

</script>

<style>

  .btn { border: 1px solid #4caf50; padding: 8px 12px; min-width: 200px; color: #4caf50; background: white; outline: none; }

  .btn:active { background: #4caf50; color: white; }

</style>

 

<div>

  <button class="btn">点击我</button>

</div>

 

<script>

  var afterClick = new Event('afterclick');

 

  var btnEle = document.querySelector('.btn');

 

  btnEle.addEventListener('afterclick', function() {

    alert('我是点击事件执行完后做的事情');

  });

 

  btnEle.o