5-13 自定义事件
本节编程练习不计算学习进度，请电脑登录imooc.com操作

自定义事件

在JS中，消息的通知是通过事件表达的，当代码库增长到一定的规模就需要考虑将行为和自定义事件进行解耦，通过事件机制可以将类设计为独立的模块，通过事件对外通信提高了程序的开发效率。

了解自定义事件的概念：

  1. 类似 DOM 的行为：你在 DOM 节点（包括 document 对象）监听并触发自定义事件。这些事件既可以冒泡，也可以被拦截。这正是 Prototype、jQuery 和 MooTools 所做的。如果事件不能扩散，就必须在触发事件的对象上进行监听。
  2. 命名空间：一些框架需要你为事件指定命名空间，通常使用一个点号前缀来把你的事件和原生事件区分开。
  3. 自定义额外数据：JavaScript 框架允许你在触发自定义事件时，向事件处理器传送额外的数据。jQuery 可以向事件处理器传递任意数量的额外参数。
  4. 通用事件 API：只用 Dojo 保留了操作原生 DOM 事件的正常API。而操作自定义事件需要特殊的发布/订阅 API。这也意味着 Dojo 中的自定义事件不具有DOM事件的一些行为（比如冒泡）。
  5. 声明：我们往往需要在预定义的事件中加入一些特殊的变化（例如，需要Alt键按下才能触发的单击事件），MooTools 运行你定义此类自定义事件。此类事件需要预先声明，即便你只是声明他们的名字。任何未声明的自定义事件不会被触发。

理论太抽象，看看 jQuery 框架中如何使用事件。

jQuery 的事件自定义事件还是通过 on 绑定的，然后再通过 trigger 来触发这个事件。

//给element绑定hello事件
element.bind("hello",function(){
    alert("hello world!");
});
//触发hello事件
element.trigger("hello");

这段代码这样写似乎感觉不出它的好处，看了下面的例子也许你会明白使用自定义事件的好处了，参考右边的代码。


trigger需要处理的问题

  1. 模拟事件对象，用户模拟处理停止事件冒泡(因为不是通过浏览器系统触发的，而是自动触发的，所以这个事件对象要如何处理？)
  2. 区分事件类型，触发标准的浏览器事件 和 自定义事件名绑定的处理程序。

拟冒泡机制

  1. 当事件是 click 类型，自然是本身支持冒泡这样的行为，通过 stopPropagation 阻止即可
  2. 当然一些事件，如 focusin 和 blur 本身不冒泡，但 jQuery 为了跨浏览器一致性， jQuery 需要在这些事件上模拟了冒泡行为，jQuery 要如何处理？
  3. 那么如果是自定义的aaa的事件名，又如何处理冒泡？

任务

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <style type="text/css">
  6.     .active{
  7. 		color: red;
  8. 	}
  9. </style>
  10. <script src="http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js" type="text/javascript"></script>
  11. <title>自定义事件</title>
  12. </head>
  13. <body>
  14.  
  15.  
  16. <ul id="tabs">
  17.     <li data-tab="users">Users</li>
  18.     <li data-tab="groups">Groups</li>
  19. </ul>
  20. <div id="tabsContent">
  21.     <div data-tab="users">part1</div>
  22.     <div data-tab="groups">part2</div>
  23. </div>
  24.  
  25.  
  26. <script type="text/javascript">
  27.  
  28.  
  29. $.fn.tabs = function(control) {
  30. 	var element = $(this);
  31. 	var control = $(control);
  32.  
  33. 	element.delegate("li", "click", function() {
  34. 		var tabName = $(this).attr("data-tab");
  35. 		//点击li的时候触发change.tabs自定义事件 
  36. 		element.trigger("change.tabs", tabName);
  37. 	});
  38.  
  39. 	//给element绑定一个change.tabs自定义事件
  40. 	element.bind("change.tabs", function(e, tabName) {
  41. 		element.find("li").removeClass("active");
  42. 		element.find(">[data-tab='" + tabName + "']").addClass("active");
  43. 	});
  44. 	element.bind("change.tabs", function(e, tabName) {
  45. 		control.find(">[data-tab]").removeClass("active");
  46. 		control.find(">[data-tab='" + tabName + "']").addClass("active");
  47. 	});
  48.  
  49. 	// 激活第一个选项卡 
  50. 	var firstName = element.find("li:first").attr("data-tab");
  51.  
  52. 	element.trigger("change.tabs", firstName);
  53.  
  54. 	return this;
  55. };
  56.  
  57.  
  58. $("ul#tabs").tabs("#tabsContent");
  59.  
  60.  
  61.  
  62. </script> 
  63.  
  64. </body>
  65. </html>
下一节