jquery现在的事件API：on，off，trigger支持带命名空间的事件，当事件有了命名空间，就可以有效地管理同一事件的不同监听器，在定义组件的时候，能够避免同一元素应用到不同组件时，同一事件类型之间的影响，还能控制一些意外的事件冒泡。在实际工作中，相信大家都用的很多，但是不一定了解它的所有细节，至少我有这样的经验，经常在碰到疑惑的时候，还得重新写例子去验证它的相关作用，所以本文想把事件命名空间相关的细节都梳理出来，将来再犯迷糊的时候可以回来翻着看看以便加深对它的理解和运用。
在详细了解命名空间之前，得先认识下什么是自定义事件，因为命名空间可以同时应用于自定义事件和浏览器默认事件当中。
1. 自定义事件
我们在定义组件的时候，浏览器的默认事件往往不能满足我们的要求，比如我们写了一个树形组件，它有一个实例方法init用来完成这个组件的初始化工作，在这个方法调用结束之后，我们通常会自定义一个init事件，以便外部可以在树组件初始化完成之后做一些回调处理：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script src="../js/lib/jquery.js"></script> <div id="tree"> </div> <script> var Tree = function(element, options) { var $tree = this.$tree = $(element); //监听init事件，触发 $tree.on('init', $.proxy(options.onInit, this)); this.init(); }; Tree.prototype.init = function() { console.log('tree init!'); this.$tree.trigger('init'); }; var tree = new Tree('#tree', { onInit: function() { console.log(this.$tree.outerHeight()); } }); </script> |
以上代码中.on(‘init’,…)中的init就是一个类似click这样的自定义事件，该代码运行结果如下
自定义事件的使用就跟浏览器默认事件的使用没有任何区别，就连事件冒泡和阻止事件默认行为都完全支持，唯一的区别在于：浏览器自带的事件类型可以通过浏览器的UI线程去触发，而自定义事件必须通过代码来手动触发：
2. 事件命名空间
事件命名空间类似css的类，我们在事件类型的后面通过点加名称的方式来给事件添加命名空间：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> var Tree = function(element, options) { var $tree = this.$tree = $(element); //监听init事件，触发 $tree.on('init.my.tree', $.proxy(options.onInit, this)); this.init(); }; Tree.prototype.init = function() { console.log('tree init!'); this.$tree.trigger('init.my.tree'); }; var tree = new Tree('#tree', { onInit: function() { console.log(this.$tree.outerHeight()); } }); </script> |
以上代码中.on(‘init.my.tree’,…)通过.my和.tree给init这个事件添加了2个命名空间，注意命名空间是类似css的类，而不是类似java中的package，所以这两个命名空间的名称分别是.my和.tree，而不是my和my.tree，注意命名空间的名称前面一定要带点，这个名称在off的时候可以用到。在监听和触发事件的时候带上命名空间，当触发带命名空间的事件时，只会调用匹配该命名空间的监听器。所以命名空间可以有效地管理同一事件的不同监听器，尤其在定义组件的时候可以有效地保证组件内部的事件只在组件内部有效，不会影响到其它组件。
现在假设我们不用命名空间，同时定义两个组件Tree和Dragable，并且同时对#tree这个元素做实例化，以便实现一棵可以拖动的树：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<script> var Tree = function(element, options) { var $tree = this.$class="crayon-line" id="crayon-5812f91eb63ee551560633-3"> var $tree = this.$Ԩ的很多，但是不一定了解它的所有细节，至少我有这样的经验，经常在碰到疑惑的时候，还得重新写例子去验证它的相关作用，所以本文想把事件命名空间相关的细节都梳理出来，将来再犯迷糊的时候可以回来翻着看看以便加深对它的理解和运用。
在详细了解命名空间之前，得先认识下什么是自定义事件，因为命名空间可以同时应用于自定义事件和浏览器默认事件当中。 1. 自定义事件我们在定义组件的时候，浏览器的默认事件往往不能满足我们的要求，比如我们写了一个树形组件，它有一个实例方法init用来完成这个组件的初始化工作，在这个方法调用结束之后，我们通常会自定义一个init事件，以便外部可以在树组件初始化完成之后做一些回调处理：
以上代码中.on(‘init’,…)中的init就是一个类似click这样的自定义事件，该代码运行结果如下
2. 事件命名空间事件命名空间类似css的类，我们在事件类型的后面通过点加名称的方式来给事件添加命名空间：
以上代码中.on(‘init.my.tree’,…)通过.my和.tree给init这个事件添加了2个命名空间，注意命名空间是类似css的类，而不是类似java中的package，所以这两个命名空间的名称分别是.my和.tree，而不是my和my.tree，注意命名空间的名称前面一定要带点，这个名称在off的时候可以用到。在监听和触发事件的时候带上命名空间，当触发带命名空间的事件时，只会调用匹配该命名空间的监听器。所以命名空间可以有效地管理同一事件的不同监听器，尤其在定义组件的时候可以有效地保证组件内部的事件只在组件内部有效，不会影响到其它组件。 现在假设我们不用命名空间，同时定义两个组件Tree和Dragable，并且同时对#tree这个元素做实例化，以便实现一棵可以拖动的树：
|
