如何在纯JavaScript中处理事件？

这可能是重复的，然而，随着新浏览器的出现，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”）”）

这意味着它不起作用了？有没有一种方法可以在纯JavaScript中创建和分派自定义事件（不会使用jQuery或类似的东西）？

我刚才有过

这是我想出的解决办法

需要ecmascript

=5

---

现在是一个使用它的“类”

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"));

酷

---

让我们看看它现在如何与您的代码配合使用

输出

MyText:我有话要说。。。
已调度事件：事件{
泡泡：错
取消泡泡：错误
可取消：false
剪贴板数据：未定义
currentTarget:null
默认值：false
事件阶段：0
路径：节点列表[0]
返回值：true
src元素：null
目标：空
时间戳：1406332794168
类型：“结束”
__原型：事件
}

---

最后，这里有一个与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;
}

我刚才喝了一杯

这是我想出的解决办法

需要ecmascript
=5


现在是一个使用它的“类”

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"));

酷


让我们看看它现在如何与您的代码配合使用

输出

MyText:我有话要说。。。
已调度事件：事件{
泡泡：错
取消泡泡：错误
可取消：false
剪贴板数据：未定义
currentTarget:null
默认值：false
事件阶段：0
路径：节点列表[0]
返回值：true
src元素：null
目标：空
时间戳：1406332794168
类型：“结束”
__原型：事件
}


最后，这里有一个与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;
}

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

如果您想查看一些示例，请访问github：


（包含可点击的链接）
在这里为我自己的教会布道，但我最近碰巧在这方面做了工作，并编写了一个处理事件和继承的小javascript

如果您想查看一些示例，请访问github：


（包含可点击的链接）
我同意！Sems很有趣，我不完全理解，但我做了测试。错误是一样的，只是指向“新事件”现在的位置。在FireFox中它可以工作！我对我的例子做了一个改编，它最终发布了“结束”事件。所以它还不是很流行…@GustavoPinent，我提供了一个与你的代码更接近的答案的改编版本。也请看。谢谢。我将保留这个问题，看看是否有人知道如何让它在较旧的ecmascript版本中工作。@GustavoPinent，我刚刚为较旧的浏览器添加了一个版本：）最大的区别是你不能依赖
Function.prototype.bind
或
Array.prototype.forEach
。我同意！Sems很有趣，我不完全理解，但我做了测试。错误是一样的，只是指向“新事件”现在的位置。在FireFox中它可以工作！我对我的例子做了一个改编，它最终发布了“结束”事件。所以它还不是很流行…@GustavoPinent，我提供了一个与你的代码更接近的答案的改编版本。也请看。谢谢。我将保留这个问题，看看是否有人知道如何使它在较旧的ecmascript版本中工作。@GustavoPinent，我刚刚为旧浏览器添加了一个版本：）最大的区别是你不能依赖
函数.prototype.bind
或
数组.prototype.forEach
。如果
新事件
在Safari中抛出错误，请检查你是否有最新版本的浏览器，如果你有，你可能想向苹果提交错误报告<代码>新事件
将在所有主浏览器中工作；Chrome、FireFox和IE9+如果
new Event
在Safari中抛出错误，请检查您是否拥有最新版本的浏览器，如果有，您可能希望向苹果提交错误报告<代码>新事件

将在所有主浏览器中工作；Chrome、FireFox和IE9+我就是这样工作的。如果你不介意的话，我可能正在使用这个解决方案。这不是我第一次在这里尝试：。希望这次能成功！我就是这样工作的。如果你不介意的话，我可能正在使用这个解决方案。这不是我第一次在这里尝试：。希望这次能成功！