Internet Explorer 11 (IE11), возможно, не самый современный браузер, но он по-прежнему имеет значительную базу пользователей. Если вы разрабатываете веб-приложения, которым необходима поддержка IE11, вы можете столкнуться с проблемами при работе с настраиваемыми событиями. В этой статье мы рассмотрим различные методы реализации пользовательских событий в Internet Explorer 11 с помощью JavaScript. Мы предоставим примеры кода и обсудим их плюсы и минусы. Давайте погрузимся!

Метод 1. Использование конструктора CustomEvent (совместим с IE11)

// Creating a custom event
var myEvent = new CustomEvent('myCustomEvent', {
    detail: { key: 'value' },
    bubbles: true,
    cancelable: true
});
// Dispatching the custom event
var myElement = document.getElementById('myElement');
myElement.dispatchEvent(myEvent);
// Listening for the custom event
myElement.addEventListener('myCustomEvent', function(event) {
    console.log(event.detail);
});

Метод 2. Создание пользовательских событий с использованием устаревшей поддержки IE11

// Creating a custom event
var myEvent = document.createEvent('CustomEvent');
myEvent.initCustomEvent('myCustomEvent', true, true, { key: 'value' });
// Dispatching the custom event
var myElement = document.getElementById('myElement');
myElement.dispatchEvent(myEvent);
// Listening for the custom event
myElement.addEventListener('myCustomEvent', function(event) {
    console.log(event.detail);
});

Метод 3: полизаполнение конструктора CustomEvent для IE11

// Polyfill for the CustomEvent constructor
(function() {
    if (typeof window.CustomEvent === 'function') return false;
    function CustomEvent(event, params) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent('CustomEvent');
        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
        return evt;
    }
    CustomEvent.prototype = window.Event.prototype;
    window.CustomEvent = CustomEvent;
})();
// Usage remains the same as Method 1

Метод 4. Использование сторонней библиотеки, например EventEmitter.js

// Using EventEmitter.js library
var emitter = new EventEmitter();
// Emitting a custom event
emitter.emit('myCustomEvent', { key: 'value' });
// Subscribing to the custom event
emitter.on('myCustomEvent', function(data) {
    console.log(data);
});

В этой статье мы рассмотрели несколько методов реализации пользовательских событий в Internet Explorer 11. Независимо от того, решите ли вы использовать встроенные конструкторы, полифилы или сторонние библиотеки, пользовательские события могут значительно повысить интерактивность и модульность вашего проекта. веб-приложения. Понимая и применяя эти методы, вы можете обеспечить бесперебойную работу пользователей, которые все еще используют IE11. Не забудьте тщательно протестировать свой код и предоставить запасные варианты для неподдерживаемых браузеров.