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上发现了这些代码并将它们放在我的app全局命名空间中：

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

这些功能非常棒，适用于所有浏览器。

在js中使用事件构造函数的一个很好的例子是什么？

2 个答案: