Javascript CustomEvent Detail 在触发时为空？

Question

好吧，自从几天前的最后一个问题以来，我已经取得了一些进展，但我对 Javascript 和 Three.js 仍然很陌生，并且遇到了这个新问题。

我正在尝试将从 OBJ 文件加载的一些 Three.js 几何图形作为与自定义事件关联的详细信息传递，以便我可以进一步处理它。由于 OBJLoader 异步运行，因此这样做是有意义的：

function loadObjAsMesh( obj ) {  // Obj Resource URL: Example: 'assets/monster.obj'

    var geometry;
    var mesh;

    loader = new THREE.OBJLoader();
            
    console.log('About to call loader.load');       
            
    loader.load(
        obj , function ( object ) { 
        
            console.log('Starting to run loader.load CALLBACK');
            
            geometry = new THREE.Geometry().fromBufferGeometry( object.children["0"].geometry );
                        
            mesh = new THREE.Mesh ( geometry, sceneEntities.materials.bluePhongSolid ); 
            
            console.log( mesh );
            
            scene.add( mesh ); 
            
            console.log ( 'About to dispatch the Finished Loading Event' );
            
            dispatchEvent( sceneSyntheticEvents.objectFinishedLoading, { 
                detail : { 
                    passedMesh : mesh 
                        }
                    }                   
                );
            
            console.log ( 'Just Dispatched the Finished Loading Event' );
            console.log ( sceneSyntheticEvents.objectFinishedLoading );
            
            console.log('Done running loader.load CALLBACK');       
        
            }   );
    
    console.log('Done calling loader.load');
}

然后，这里是eventlistener：

function events() {
    
    sceneSyntheticEvents.objectFinishedLoading = new CustomEvent('objectFinishedLoading');
    
    console.log ( 'About to catch the Finshed Loading Event' );
    
    addEventListener('objectFinishedLoading', function (e) { console.log ( e.detail.passedMesh ); }, false);
    
    console.log ( 'Just Caught the Finished Loading Event' );
}

事件成功触发并被侦听器“听到”。问题是 event.detail 为空。我试过用几种不同的方式来格式化细节——没有骰子，所以我很确定这不是语法或约定的问题。

如您所见，我在应用程序中有大量仪器，这清楚地表明，一旦事件触发，问题就会发生。并不是听者没有得到e.detail. 不知何故，细节在它触发的那一刻根本没有包含在事件中。

我什至尝试用几种不同的方式测试整数，认为问题出在网格上。我试过这个例如：

            dispatchEvent( sceneSyntheticEvents.objectFinishedLoading, { 
                detail : { 
                    passedMesh : "32" 
                        }
                    }

和...

            dispatchEvent( sceneSyntheticEvents.objectFinishedLoading, { 
                detail :  "32" 
                    }

即使这样，控制台报告：

CustomEvent {isTrusted: false, detail: null, type: "objectFinishedLoading", target: Window, currentTarget: Window…}

详细信息：空？引号中的“详细信息”，而不是引号中，没有差异。

我显然对此一无所知。有任何想法吗？

Answer 1

的dispatchEvent方法采用单个参数，该事件对象。

您需要将detail对象传递给事件构造函数。在您的情况下，您将事件选项作为第二个参数传递dispatchEvent，不会产生任何影响。

addEventListener('my-custom-event', function(e) {
  console.log('event handler', e.type);
  console.log(e.detail)
}, false);

var event = new CustomEvent('my-custom-event', {
  detail: {
    key: 'detail-value'
  }
})
dispatchEvent(event);