<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="outer"> <div id="inner">Leonardo Da Vinci</div> </div> <button onclick="tiggerMyEvent();">触发事件</button> <script> document.querySelector("#outer").addEventListener('Leonardo Da Vinci',function(e){ console.log('捕获事件',e.detail,e); console.log('捕获事件',new Date().getTime()); },false); function tiggerMyEvent(){ var evt = (void 0); try{ // Chrome浏览器、Firefox浏览器 evt = new CustomEvent('Leonardo Da Vinci',{ detail:{ // optional and defaulting to null, of type any, that is an event-dependent value associated with the event film:'忍者神龟' }, bubbles:true, // (Optional) A Boolean indicating whether the event bubbles. The default is false. cancelable:true // (Optional) A Boolean indicating whether the event can be canceled. The default is false. }); }catch(e){ // IE Edge浏览器 evt = document.createEvent('Event'); // Event type字符串只能是事件模块中定义的值。 evt.initEvent('Leonardo Da Vinci',true,true); // the type of event，bubbles，cancelable evt.detail = { film:'忍者神龟' }; } console.log('触发事件',new Date().getTime()); document.querySelector('#inner').dispatchEvent(evt); } setTimeout(function(){ console.log('定时器',new Date().getTime()) },1); for(var i=0;i<10;i++){ console.log('基准'+i,new Date().getTime()); } </script> </body> </html>