• 当前标签:自定义事件

程序开发 JavaScript 自定义事件

<body>          <div></div>          <script>              // 创建自定义事件              var customEvent =document.createEvent('CustomEvent')                // 初始化自定义事件                          customEvent.initCustomEvent('自定义事件',true,true,{a:'123',b:'456'})              // initCustomEvent 四个参数:              //                     1:事件类型名称              //                     2:是否可以冒泡              //                     3:是否可以取消默认事件              //                     4:自定义数据                // 事件对象event.detail获取自定义数据                var div =document.querySelector('div')              div.addEventListener('自定义事件',function(e){                  alert('观察到了一个自定义事件'+ '-' + e.detail.b)              })                div.dispatchEvent(customEvent)              // 派发事件                // 自定义事件的使用过程:              // 1、创建一个自定义事件对象              // 2、初始化该事件对象              // 3、监听自定义事件              // 4、派发该事件                document.body.addEventListener('discoverNumber',function(e){                  alert('得到一个数:' + e.detail.num + '|' + e.detail.description)              })              window.addEventListener('discoverNumber',function(e){                  alert('第二个监听者:' + e.detail.num)              })              for(var i = 0;i<=100;i++){                  if(i%3 == 0){                      // 创建一个数据对象                      var detaila = new Object()                      detaila.num = 1                      detaila.description = '被三整除的数'                        // 事件数据                      var data = {}                      data.detail = detaila                      data.bubble =true                      data.cancelable = true                        // 自定义事件new Event 和 new CustomEvent                      var e = new CustomEvent('discoverNumber',data)                      // 创建新的自定义事件                        document.body.dispatchEvent(e)                      // 派发事件                    }              }                            // 总结              //     自定义事件类型名称可以是任意名称 可以写成中文              //     自定义事件可以挖洞(捕获过程) 事件的传播是正常的              //     自定义事件可以设置不冒泡 可以控制是否能够取消              //     自定义事件可以携带数据 这个数据可以是一个复杂的数据对象 也可以是一个简单数字或者字符串                // 参考资料: http://www.jianshu.com/p/418e9e35d5a1          </script>      </body>  

2017-07-22 09:08:42 33 0 0
阅读详情
  • 1
前往