Что является хорошим примером использования конструкторов событий в js?

Я пытаюсь выяснить, как правильно создавать и запускать события в JavaScript, поэтому в процессе обучения на этой странице появилась страница:

https://developer.mozilla.org/en-US/docs/DOM/document.createEvent

Что наверху сообщает мне следующее:

Метод createEvent устарел. Вместо этого используйте конструкторы событий.

Конструкторы событий Jog-событий Googling не были очень плодотворными - темы, рассказывающие о конструкторах вообще, но не то, что я ищу. Может ли кто-нибудь объяснить мне, что такое конструкторы событий и служить хорошим примером их использования?

Ответ 1

Из https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent:

Кажется, что события теперь инкапсулированы в класс под названием CustomEvent. Вы можете вспомнить старый document.createEvent как метод factory, который возвращает объект события. Теперь вместо того, чтобы использовать document.createEvent для создания объекта, теперь у вас есть доступ для непосредственного создания объекта.

    //this is the new way
    var my_event = new CustomEvent('NewEventName');
    var my_element = document.getElementById('TargetElement');
    my_element.dispatchEvent(my_event);

является заменой для

    //this is the old way
    var my_event = document.createEvent('NewEventName');
    var my_element = document.getElementById('TargetElement');
    my_element.dispatchEvent(my_event);

Ответ 2

Вы хотите использовать addEventListener()

https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

Вот мой код библиотеки для добавления событий, я нашел их в stackoverflow и помещал их в глобальное пространство имен приложения:

var app={}

app.listenEvent=function(eventTarget, eventType, eventHandler) { 
   if (eventTarget.addEventListener) {
      eventTarget.addEventListener(eventType, eventHandler,false); 
   } 
  else if (eventTarget.attachEvent) {
      eventType = "on" + eventType;
      eventTarget.attachEvent(eventType, eventHandler); 
  } 
  else {
     eventTarget["on" + eventType] = eventHandler; 
  }
}


app.cancelEvent=function(event) {
    if (event.preventDefault) 
       event.preventDefault()
    else 
       event.returnValue = false; 
}


app.cancelPropagation=function(event) {
    if (event.stopPropagation) { 
        event.stopPropagation();
    } else {
     event.cancelBubble = true; }
 }

Итак, чтобы добавить прослушивание события:

app.listenEvent(document.aform.afield, 'focus', function(){console.log(arguments)} )

Эти функции великолепны, они работают во всех браузерах.