<!--

        描述：事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，  
        所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。  
          點擊->var clickEvent = new Event('click') ->存在addEventListener監聽函數->執行監聽函數  
           將clickEvent對象作爲參數傳遞過去  
    -->  
    <!--  
        var eve = new Event('look',{  
        "bubbles":false,  
        "cancelable":false  
    });  
    document.dispatchEvent(eve); //document調用 Event是dom下的一部分  
    -->  
    <div>父div  
    <h1>1111111111111</h1>  
    </div>  
</body>  
<script>  
    var eve = new CustomEvent('look',{  
        "bubbles":false,  
        "cancelable":false  
    });

    var h1=document.querySelector("h1");  
    var div1 =document.querySelector("div");  
    h1.addEventListener('look',function(ev){  
        console.info('user defined event happen');  
        var bubble=ev.bubbles;  
        console.error(bubble)//false 非冒泡類型  
    },false)  

// div1.addEventListener('look',function(){
// console.error("parent element div attach")
// },true)//useCapture 情況下執行 且先于h1執行

    div1.addEventListener('look',function(){  
        console.error("parent element div attach")  
       },false)//useCapture 為false 冒泡情況下才執行   --->結果:由於h1的bubbles=false 不冒泡  因此div1的事件不觸發  
    h1.dispatchEvent(eve);//user defined event happen  
    //手動觸發事件執行

</script>  

自定義事件傳參數

var myEvent = new CustomEvent('myevent', {
detail: {
foo: 'bar'
},
bubbles: true,
cancelable: false
});

el.addEventListener('myevent', function (event) {
console.log('Hello ' + event.detail.foo);
});

el.dispatchEvent(myEvent);