JavaScript 自定义事件

黄良钵

分类: 程序开发 682 0

  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>  
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、自定义事件

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript 自定义事件”

Loading...