使用函数作为param的dispatchEvent()执行函数而不是传递它

Question

我正在尝试将一个事件发送到window.top.document as

frame1中的代码:

function callingBell(){
    alert('ding dong');
}

 var event = window.top.document.createEvent("CustomEvent");
 event.initCustomEvent('READY', false, false, { 'bell': callingBell });
 window.top.document.dispatchEvent(event);

在第2帧:

window.top.document.addEventListener('BOMREADY', function(e) {

    bell= e.detail.bell;

}, false);

更多细节:我有一个父jsp.在父jsp中,我有2个子jsps.该场景第一次运行良好.当我刷新/重新加载两个子jsps而父帧没有刷新时 - 出现上述问题.显示警报"叮咚"的次数正是我刷新子帧的次数.含义:在第7次刷新时,警报出现7次.我怀疑window.top.document中的某些东西被破坏,以便在将它传递给侦听器之前执行该函数.

在第二次刷新之后,当执行到达"window.top.document.dispatchEvent(event)"时,不是先进入目标侦听器,而是调用callingBell函数,并在执行到达侦听器代码之前显示警报.

此外,如果callingBell不是函数,则会按预期调用一次侦听器.

更新:我可以通过使用以下方法删除addEventListener中的事件侦听器来解决此问题:

  e.target.removeEventListener('READY', arguments.callee, false);

但是,我不能将其作为最终解决方案,因为我需要稍后事件的监听器.

Answer 1

我怀疑您遇到此问题是因为您没有删除回调中的侦听器。这就是为什么每次实际刷新时，您都会堆叠事件并收到多个警报。

这就是我实际上要做的：

window.top.document.addEventListener('BOMREADY', _callback(e), false);

function _callback(e) {
  window.top.document.removeEventListener('BOMREADY', _callback(e), false);

  // Keep executing your function
  bell = e.detail.bell;
  bell();
}

希望这可以帮助 ！