Question

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

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

当我确定JQuery已被加载时，此事件将在稍后的代码中被提取。所以我想使用JQuery来接收这个事件。

我看到了之前提出的问题：How to trigger a custom javascript event in IE8?并应用了答案，但是当我尝试通过JQuery获取事件时，没有任何反应。

以下是我尝试的内容：

＆＃13;

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

＆＃13;

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

＆＃13;

PS：该代码段似乎无法在IE中正常运行。这是jsfiddle应该正常工作。

Answer 1

此代码存在一些问题。

您隐藏内置window.Event而不检查它是否存在;这可能会导致其他脚本出现问题。
从this侦听器调用回调时，不保留onpropertychange绑定。您应该将回调应用于文档而不是直接调用它，因此行为将尽可能接近addEventListener。
您尝试在未定义的情况下递增document.documentElement[eventName]。第一个调用会将值更改为NaN，因此onpropertychange应该将其提取，但在后续调用中，它将保持NaN。
您没有尝试.on()识别您的Event.listen功能，因此Event.listen中的代码永远不会从.on()附加的侦听器执行

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

在IE8中：在vanilla JS中创建一个自定义事件并在Jquery中获取它

1 个答案: