Javascript CustomEvent的详细信息是否为空？

Question

好吧，我已经在几天前的最后一个问题后取得了一些进展，但在JavaScript和Three.js方面我还是很新的，并且正在遇到这个新问题。

我试图通过一个OBJ文件加载一些three.js几何作为与自定义事件相关的细节，以便我可以进一步处理它。这是有道理的做这样的OBJLoader异步运行：

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

 
\t var geometry; 
 
\t var mesh; 
 

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

然后，这里的事件监听：

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

事件是成功开火并听取了听众的意见。问题是event.detail为空。我尝试过几种不同的格式化细节 - 没有骰子，所以我很确定这不是语法或约定的问题。

我已经在应用程序中看到了一大堆仪器，正如您所看到的，清楚地表明问题一旦事件触发就会发生。这并不是说听众没有得到e.detail。不知何故，细节并没有被包含在事件发生的瞬间。

我甚至尝试用一些不同的方法测试整数，认为问题是网格。我想这比如：

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

和...

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

即使如此，控制台报告：

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

细节：空？ “detail”用引号引起来，而不是用引号引起来，没有差异。

我很清楚这一点在我的头上。有任何想法吗？

谢谢。

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);