javascript - 什么是在 js 中使用事件构造函数的好例子？

Question

我试图弄清楚如何在 JavaScript 中正确创建和触发事件，所以在学习过程中遇到了这个页面：

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

顶部告诉我以下内容：

createEvent 方法已弃用。请改用事件构造函数。

谷歌搜索 JS 事件构造函数并不是很有成效——主题一般都在谈论构造函数，但不是我想要的。有人可以向我解释什么是事件构造函数并提供一个很好的例子来说明它们的用法吗？

Answer 1

来自https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent：

似乎事件现在被封装在一个名为 CustomEvent 的类中。您可以将旧的 document.createEvent 视为返回事件对象的工厂方法。现在，您现在可以直接创建对象，而不是使用 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);

Answer 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)} )

这些功能很棒，它们适用于所有浏览器。