JavaScript自定义事件及dom无关事件

一、      自定义事件

相信大部分的朋友对事件监听并不陌生，这是我们实际开发中常用的一种代码实现方式。但似乎我们之前用到的都是浏览器内置的事件，能不能自定义事件进行触发呢？

实际上在jQuery中为我们提供了 trigger() 函数，专门用来触发自定义事件。可以通过命名空间的形式来管理事件名称，命名空间中的单词用点号分隔 。 如：

//   绑定自定义事件

$(“.class“).bind(“refresh.widget”,function(){})

//  触发自定义事件

$(“.class”).trigger(“refresh.widget”);

 

我们还可以通过给trigger （）传入一个额外的参数给事件处理程序传入数据。 数据会以附加参数的形式带入回调：

// 绑定自定义事件，监听回调参数

$(“.class”).bind(“frob.widget”,function(event,dataNumber){

  console.log(dataNumber);

})

// 触发自定义事件，传入参数

$(“.class”).trigger(“frob.widget”,5);

 

注意：自定义事件和内置事件一样，会沿着dom树做冒泡 。

 

二、      dom无关事件

js中基于事件的编程机制是非常强大的，因为它能让你的框架充分解耦，让功能变得更加内聚切具有更好的可维护性 。但是事件本质上是和dom无关的，因此你可以很容易的开发出一个事件驱动的库。我们可以称这种模式为发布 / 订阅 .

发布/ 订阅（Pub/Sub）是一种消息模式，它有两个参与者：发布者和订阅者 。发布者向某个信道发布一条消息，订阅绑定这个信道，当有消息发布至信道时就会接受一个通知。最重要的一点是，发布者和订阅者是完全解耦的，彼此并不知晓对方的存在。两者仅仅共享一个信道名称 。

 发布者和订阅者的解耦可以让你的应用易于拓展，而不必引入额外的交叉依赖和耦合。从而提高了应用的可维护性，添加额外功能也非常容易。

 

代码实现：

    var PubSub = {

      // 定义订阅函数

        subscribe:function (e,callback) {

           // 定义 _callbacks 对象，除非它已经存在了 。

           var calls = this._callbacks||(this._callbacks = {});

           // _callbacks[e] 针对不同的信道名称，存储多个回调函数 。

            (this._callbacks[e]||(this._callbacks[e]=[])).push(callback);

            return this;

        },

// 定义发布函数

        publish:function () {

           // 将arguments 对象，转换为真正的数组

              var args=Array.prototype.slice.call(arguments,0);

          // 拿出第一个参数，即信道名称（事件名称）

              var ev = args.shift();

              var list,calls,i,l;

          // 如果不存在 _callbacks 对象则返回

              if(!(calls=this._callbacks))

                  return this;

          //  如果不包含给定事件所对应的数组，同样返回

              if(!(list=this._callbacks[ev]))

                  return this;

            // 依次触发事件对应的回调函数

              for(i=0,l=list.length;i<l;i++)

                  list[i].apply(this,args);

                  return this;

        }

    }

 //  使用方法

    PubSub.subscribe("wem",function() {  // 订阅

         alert("wem");

    })

 

    PubSub.publish("wem"); // 发布

 

注意：我们可以使用命名空间的方式来管理事件名称，比如使用冒号分隔符（：）

 

PubSub.subscribe(“user:create”,function(){});