1. <body>
2. <div></div>
3. <script>
4. // 创建自定义事件
5. var customEvent =document.createEvent('CustomEvent')
6.
7. // 初始化自定义事件
8. customEvent.initCustomEvent('自定义事件',true,true,{a:'123',b:'456'})
9. // initCustomEvent 四个参数：
10. // 1：事件类型名称
11. // 2：是否可以冒泡
12. // 3：是否可以取消默认事件
13. // 4：自定义数据
14. // 事件对象event.detail获取自定义数据
15.
16. var div =document.querySelector('div')
17. div.addEventListener('自定义事件',function(e){
18. alert('观察到了一个自定义事件'+ '-' + e.detail.b)
19. })
20.
21. div.dispatchEvent(customEvent)
22. // 派发事件
23.
24. // 自定义事件的使用过程：
25. // 1、创建一个自定义事件对象
26. // 2、初始化该事件对象
27. // 3、监听自定义事件
28. // 4、派发该事件
29.
30. document.body.addEventListener('discoverNumber',function(e){
31. alert('得到一个数：' + e.detail.num + '|' + e.detail.description)
32. })
33. window.addEventListener('discoverNumber',function(e){
34. alert('第二个监听者：' + e.detail.num)
35. })
36. for(var i = 0;i<=100;i++){
37. if(i%3 == 0){
38. // 创建一个数据对象
39. var detaila = new Object()
40. detaila.num = 1
41. detaila.description = '被三整除的数'
42.
43. // 事件数据
44. var data = {}
45. data.detail = detaila
46. data.bubble =true
47. data.cancelable = true
48.
49. // 自定义事件new Event 和 new CustomEvent
50. var e = new CustomEvent('discoverNumber',data)
51. // 创建新的自定义事件
52.
53. document.body.dispatchEvent(e)
54. // 派发事件
55.
56. }
57. }
58.
59. // 总结
60. // 自定义事件类型名称可以是任意名称 可以写成中文
61. // 自定义事件可以挖洞（捕获过程） 事件的传播是正常的
62. // 自定义事件可以设置不冒泡 可以控制是否能够取消
63. // 自定义事件可以携带数据 这个数据可以是一个复杂的数据对象 也可以是一个简单数字或者字符串
64.
65. // 参考资料： http://www.jianshu.com/p/418e9e35d5a1
66. </script>
67. </body>