我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:如何理解JavaScript的自定义事件?如何触发CustomEvent? - customevent自定义事件
如何理解JavaScript的自定义事件?如何触发CustomEvent?(图3-1)

大家好,这里是苏南大叔的“程序如此灵动”博客,记录苏南大叔和计算机代码的故事。本文测试环境: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>

苏南大叔:如何理解JavaScript的自定义事件?如何触发CustomEvent? - jq-bind
如何理解JavaScript的自定义事件?如何触发CustomEvent?(图3-2)

参考文章:

原生版本事件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是预留的槽位!

苏南大叔:如何理解JavaScript的自定义事件?如何触发CustomEvent? - addEventListener
如何理解JavaScript的自定义事件?如何触发CustomEvent?(图3-3)

参考文章:

表格总结对比

方案绑定解绑触发事件事件对象
jquery.on()/.bind().unbind().trigger(){type,[data]}
原生.addEventListener().removeEventListener().dispatchEvent()new CustomEvent(type, {detail:data})

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

结束语

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   JavaScript