在IE8中:在vanilla JS中创建自定义事件，然后在Jquery中选取它

In IE8: Create a custom event in vanilla JS and pick it up in Jquery

本文关键字：然后 选取 事件 Jquery 创建 IE8 vanilla JS 自定义      更新时间：2023-09-26

所有这些都发生在IE8上。

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

当我确定 JQuery 将被加载时，稍后将在另一段代码中选取此事件。所以我想用JQuery来接这个事件。

我看到了之前提出的问题：如何在IE8中触发自定义javascript事件？并应用了答案，这有效，但是当我尝试通过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。

这段代码存在一些问题。

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

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

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

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

你试过使用 Andrea Giammarchi 的 CustomEvent shim 吗？

相关文章：