Question

这可能是重复的，然而，在新的浏览器的JavaScript世界中，事情正在快速变化。我很久以前使用的是AS3中使用的一些资源，现在它终于在JavaScript中流行了。但是，我仍然无法在我的课程中使事件发挥作用。我使用Mozilla MDN作为指南做了这个简单的例子：

var endEvent = new Event("end");

function MyClass(text){
    this.text = text;
    this.show = function(){
        console.log("MyText: "+this.text);
        this.dispatchEvent(endEvent);
    }
}

function End(evt){
    console.log("Event dispatched: "+evt);
}

function run(){
    var MyInstance = new MyClass("I have something to say...");
    MyInstance.addEventListener("end", End, false);
    MyInstance.show();
}

在第一行，Safari返回：“TypeError：'[object EventConstructor]'不是构造函数（评估'new Event（”end“）'）”。

这意味着不起作用？有没有办法在PURE JavaScript中创建和发送自定义事件（不会使用jQuery或类似的东西）？

Answer 1

我之前有this same question

这是我提出的解决方案

需要 ecmascript >= 5

function Emitter() {
  var eventTarget = document.createDocumentFragment();

  function delegate (method) {
    this[method] = eventTarget[method].bind(eventTarget);
  }

  [
    "addEventListener",
    "dispatchEvent",
    "removeEventListener"
  ].forEach(delegate, this);
}

现在是＆＃34;班级＆＃34;使用它

function Example() {
  Emitter.call(this);
}

让我们现在试试吧！

var e = new Example();

e.addEventListener("something", function(event) {
  alert("something happened! check the console too!");
  console.log(event);
});

e.dispatchEvent(new Event("something"));

酷！

让我们看看它现在正在使用您的代码。 Here's a demo

// include function Emitter from above

function MyClass(text){

  Emitter.call(this);

  function show() {
    console.log("MyText:", text);
    this.dispatchEvent(new Event("end"));
  }

  this.show = show;
}

function onEnd(event){
  console.log("Event dispatched:", event);
}

function run(){
  var myInstance = new MyClass("I have something to say...");
  myInstance.addEventListener("end", onEnd, false);
  myInstance.show();
}

run();

输出

MyText: I have something to say... 
Event dispatched: Event {
  bubbles: false
  cancelBubble: false
  cancelable: false
  clipboardData: undefined
  currentTarget: null
  defaultPrevented: false
  eventPhase: 0
  path: NodeList[0]
  returnValue: true
  srcElement: null
  target: null
  timeStamp: 1406332794168
  type: "end"
  __proto__: Event
}

最后，这里的Emitter版本与ecmascript < 5

兼容

// IE < 9 compatible
function Emitter() {
  var eventTarget = document.createDocumentFragment();

  function addEventListener(type, listener, useCapture, wantsUntrusted) {
    return eventTarget.addEventListener(type, listener, useCapture, wantsUntrusted);
  }

  function dispatchEvent(event) {
    return eventTarget.dispatchEvent(event);
  }

  function removeEventListener(type, listener, useCapture) {
    return eventTarget.removeEventListener(type, listener, useCapture);
  }

  this.addEventListener = addEventListener;
  this.dispatchEvent = dispatchEvent;
  this.removeEventListener = removeEventListener;
}

有关在旧版浏览器中触发事件的信息，请参阅document.createEvent

您可以制作这样的填充物（未经测试）

if (typeof Event !== "function") {
  function Event(type) {
    var e = document.createEvent("Event");
    e.initEvent(type, true, true);
    return e;
  }
}

Answer 2

在这里为我自己的教会讲道，但我最近碰巧在这方面做了一些工作并编写了一个处理事件和继承的小javascript。

如果你想查看一些例子，那就在github上了：

http://nicolasbize.com/moojs

（包含可点击的链接）

如何使用纯JavaScript中的事件？

2 个答案: