JS 的事件发送和监听代码编写 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var events = {};//存储事件总线的对象
      var eventEmitter = {
        emit: function (eventName) {
          /**
           * 发送事件的时候获取发送事件携带的参数，在pubsubjs中是返回了所有的参数，这才看到了第一个参数是事件名
           * 第二个参数是事件携带的参数，我们在这里暂时只返回携带的参数给监听方法
           * 发送方法可以有多个，参数内容也可以不断的改，但是监听的事件只有一个，每次都只是监听初始化发来的参数，
           * 所以循环列表的时候如果有多个方法也只是执行第一次发来的参数，不合理，所以监听方法只能有一个
           * 
          **/
          var args = arguments[1]
          var callbackArr = events[eventName];
          //发送的事件到事件对象中按照事件名字去寻找指定的事件列表
          if (callbackArr && callbackArr.length) {
            for (var i = 0; i < callbackArr.length; i++) {
              //然后循环执行列表中注册加入进来的事件连带参数
              callbackArr[i](args||null);
            }
          }
        },
      };
      var eventListener = {
        on: function (eventName, callback) {
          //eventName就是事件的名字，如果对象中没有指定的属性就创建一个空的指定对象属性的数组
          if (!events[eventName]) {
            events[eventName] = [];
          }
          //成为数组以后就把监听指定事件名称的函数放入数组
          events[eventName].push(callback);
        },
        remove: function (eventName, callback) {
          var callbackArr = events[eventName];
          //移除事件的时候找到了指定事件名的属性，然后删除他的事件列表，这样发送事件后监听的时候就没有这个事件了
          if (callbackArr && callbackArr.length) {
            var index = callbackArr.indexOf(callback);
            callbackArr.splice(index, 1);
          }
        },
      };

      var clickCallback = function () {
        console.log("click callback");
      };
      eventListener.on("click", clickCallback);
      // eventListener.on("say", (data)=>{
      //   console.log('早上好'+data.name)
      // });
      eventListener.on("click", function () {
        console.log("other click callback");
      });
      eventEmitter.emit("click");
      eventListener.remove("click", clickCallback);
      eventEmitter.emit("click");
      // eventEmitter.emit("say",{name:'张三'});
      // eventEmitter.emit("say",{name:'李四'});
    </script>
  </body>
</html>

 

posted @ 2021-06-08 10:07  洛晨随风  阅读(505)  评论(0)  编辑  收藏  举报