Javascript：このカスタムイベントリスナーを動作させるには

Question

zoomInとzoomOutイベントリスナーを作成しようとしていますが、動作しないようです。誰か助けてくれますか？私のコードは....

//Classes for my own personal custom event listeners 

var customEvent1 = new CustomEvent(
    'custom1', 
    { 
     detail: 
     { 
      zoomIn: false, 
      zoomOut: false, 
     }, 
     bubbles: true, 
     cancelable: true 
    } 
); 
document.dispatchEvent(customEvent1); 

//Handlers for the custom events 

function custom1Handler(e) 
{ 
    var windowHeight = window.innerHeight; 
    var windowWidth = window.innerWidth; 
    var height, width; 
    height = windowHeight; 
    width = windowWidth; 
    if (height >= windowHeight || width >= windowWidth) 
    { 
     e.detail.zoomOut = true; 
     console.log("Zoomed out"); 
    } 
    else if (width <= windowWidth || width <= windowWidth) 
    { 
     e.detail.zoomIn = true; 
     console.log("Zoomed in"); 
    } 
    else 
    { 
     console.log("Cant determine Custom Zoom Event Listener"); 
    } 
} 

//Initiate events 

document.addEventListener("custom1", custom1Handler, false); 

それは何のエラーを与えていないが、私はページにズームインまたはズームアウトしたときにオフに解雇されていません。私は間違って何をしているのですか？

Answer 1

リスナーを追加した後のイベントのディスパッチは、以前からではありません。

document.addEventListener("custom1", custom1Handler, false); 
document.dispatchEvent(customEvent1);