Javascript CustomEvent 详细信息在触发时为空？

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方法接受一个参数，event object .

您需要将 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);