如何理解JavaScript的自定义事件？如何触发CustomEvent？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

回归本源，本文讨论javascript的自定义事件的问题，测试的范围限于浏览器环境。纯node环境情况下，目前不做考虑范围内。使用的是new CustomEvent()对象，具体来说，演示了事件名称e.type和事件数据e.detail两个属性。

大家好，这里是苏南大叔的“程序如此灵动”博客，记录苏南大叔和计算机代码的故事。本文测试环境：chrome@130.0.6723.92。

jquery版本事件

最容易接受的自定义事件的写法方式，就是jquery的.on()和.bind()绑定事件写法，解除绑定使用的是.unbind()。触发事件使用的是.trigger()。

测试代码：

<button onclick="javascript:call_trigger()">触发</button>
<button onclick="javascript:call_trigger2()">触发2</button>
<button onclick="javascript:call_unbind()">解绑</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(window).on("myevent", function (event, param1, param2) {
    console.log("自定义事件");
    console.log(event.type, param1, param2);
  });
  $(window).bind("myevent2", function (event, param1, param2) {
    console.log("自定义事件2");
    console.log(event.type, param1, param2);
  });
  function call_trigger() {
    $(window).trigger("myevent", ["param1", "param2"]);
  }
  function call_trigger2() {
    $(window).trigger("myevent2", ["param1", "param2"]);
  }
  function call_unbind() {
    $(window).unbind("myevent");
    $(window).unbind("myevent2");
  }
</script>

参考文章：

• https://newsn.net/say/jq-on.html

原生版本事件CustomEvent

原生的浏览器事件里面，使用的是.addEventListener()进行事件绑定，然后使用.removeEventListener()解除绑定。事件的触发使用的是：.dispatchEvent()。这里使用了一个CustomEvent()类是事件对象进行了包装。

测试代码：

<button onclick="javascript:call_trigger()">触发</button>
<button onclick="javascript:call_unbind()">解绑</button>
<script>
  let myevent_func = function (e) {
    console.log("自定义事件");
    console.log(e.type, e.detail.p1, e.detail.p2);
  };
  window.addEventListener("myevent", myevent_func);
  function call_trigger() {
    var event = new CustomEvent("myevent", {
      detail: { p1: "param1", p2: "param2" },
    });
    window.dispatchEvent(event);
  }
  function call_unbind() {
    window.removeEventListener("myevent", myevent_func);
  }
</script>

注意这里的所有的自定义数据，都只能放在.detail属性里面。放在别的名字的属性的话，会无法识别出来。就是说，只有一个.detail是预留的槽位！

参考文章：

• https://newsn.net/say/js-event-listener.html
• https://newsn.net/say/js-event-order.html
• https://newsn.net/say/js-event-target.html

表格总结对比

可见，在jquery版本的自定义事件中，事件本身就是个普通的{}。而原版的浏览器支持的自定义事件当中，存在一个CustomEvent()类，并且参数数据，也被隐藏到了.detail属性里面。

结束语

本文引入了一个新的对象CustomEvent()，本文仅仅使用了其事件名称和事件数据两个功能。其实有更多的参数，待以后发掘。

• https://newsn.net/tag/javascript/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。