javascript - 在 IE8 中 : Create a custom event in vanilla JS and pick it up in Jquery

Question

所有这一切都发生在 IE8 上。

由于脚本导入顺序，我在加载 JQuery 之前执行了一些代码，我需要触发自定义事件。

当我确定 JQuery 已被加载时，稍后将在另一段代码中拾取此事件。所以我想使用 JQuery 来获取此事件。

我看到了之前提出的问题:How to trigger a custom javascript event in IE8?并应用了答案，该答案有效，但是当我尝试通过 JQuery 获取事件时，什么也没有发生。

这是我尝试过的:

function Event() {}

Event.listen = function(eventName, callback) {
  if (document.addEventListener) {
    document.addEventListener(eventName, callback, false);
  } else {
    document.documentElement.attachEvent('onpropertychange', function(e) {
      if (e.propertyName == eventName) {
        callback();
      }
    });
  }
};

Event.trigger = function(eventName) {
  if (document.createEvent) {
    var event = document.createEvent('Event');
    event.initEvent(eventName, true, true);
    document.dispatchEvent(event);
  } else {
    document.documentElement[eventName] ++;
  }
};



Event.listen('myevent', function() {
  document.getElementById('mydiv-jquery').innerText = "myevent jquery";
});

$(document).on('myevent', function() {
  document.getElementById('mydiv-vanilla').innerText = "myevent vanilla";
});

Event.trigger('myevent');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mydiv-jquery">Nothing</div>
<div id="mydiv-vanilla">Nothing</div>

PS: 该代码段似乎无法在 IE 中正常工作。这是 jsfiddle这应该有效。

Answer 1

这段代码有一些问题。

• 您隐藏内置 window.Event 而不检查它是否存在；这可能会导致其他脚本出现问题。

• 从 onpropertychange 监听器调用回调时，您不会保留 this 绑定(bind)。您应该将回调应用于文档，而不是直接调用它，这样行为将尽可能接近 addEventListener。

• 您尝试在未定义的情况下递增 document.documentElement[eventName]。第一次调用会将值更改为 NaN，因此 onpropertychange 应选取该值，但在后续调用中，它将保持 NaN。

• 您没有尝试让 .on() 识别您的 Event.listen 函数，因此自然是 Event.listen 中的代码code> 永远不会从附加有 .on() 的监听器执行。

您是否尝试过使用 Andrea Giammarchi 的 CustomEvent垫片？