Javascript事件处理历史记录

虽然我确实了解Javascript事件处理的细节，但我想了解它背后的完整历史，比如事件处理是如何实际实现的（可能在标记中使用它，如

）

以及它后来如何被更新为其他东西，比如从JS调用它（不引人注目的JS）

现在如何使用jQuery实现它

---

我只是想了解每个阶段的优势，以及诸如事件冒泡/捕获等方面的优势。好吧，没什么大不了的。或者，真的，这件事发生在很久以前

.addEventListener

与CSS存在的时间一样长。 这就是DOM-Level2与我们在一起的时间（我想大约13年）

这不是一个JS如何变得更先进的问题，而是一个JS作者如何没有的问题

我认识的程序员，他们以“第二”或“第三”角色编写JS，仍然使用内联处理程序。 这是一个特别好的主意，已经过去十多年了

至于“不引人注目”，这不一定与事件侦听器直接相关。
如果您打算以任何方式与用户交互，这是一个问题，但更多的是一个分离关注点的问题，就像我们不再为红色文本这样的元素设置样式一样

DOM-0事件处理程序（如

button.onclick=function（）{}

）长期存在并仍然频繁使用的部分原因可能是因为Microsoft的

attachEvent

和W3C的

addEventListener

之间的战争

如果您想在IE6-8中支持跨浏览器事件，您可以使用jQuery（或其他库），手动编写事件管理函数，以支持IE的

.attachEvent

和其他所有人的

.addEventListener

，或者直接使用事件属性（

.onclick=function（）{}

）。它们的好处是，现在使用的几乎每个浏览器都支持它们。
它们的缺点是只有一个可分配的功能（如果需要添加更多功能，则会导致糟糕的处理）：

…现在想象8个不同的程序员以这种方式向同一个按钮添加侦听器

至于冒泡与捕获…
这从来不是一场真正的战斗（后网景）。
Microsoft支持bubble，W3C支持两者。没有人真正使用捕获来做任何事情，因为在事件实际发生之前，甚至在目标知道它正在发生之前，很少有时候你想知道它（因为使用捕获的唯一方法是使用addEventListener，这意味着你的事件在IE上不起作用…）

jQuery带来的不是“新”事件或“更好”事件——它所做的是允许每个人编写跨浏览器事件。
许多AJAX库的主要目标是：规范化

addEventListener

和

attachEvent

（在jQuery之前，这是一个已解决的问题）之间的差异，以及

XMLHttpRequest

和

ActiveXObject（“MSXML2.XMLHTTP.6.0”）

（同样，在jQuery之前已解决）之间的差异

jQuery刚刚成为大众的最爱，Resig在这方面做了一些好的事情（而jQuery用户在这方面做了一些糟糕的事情，迫使Resig和朋友们成为超级人性化的傻瓜式DOM遍历和事件委派等等）

在过去6年中，随着道格拉斯·克罗克福德（Douglas Crockford）和尼古拉斯·扎卡斯（Nicholas Zakas）等人在社会领域占据主导地位，就专业、高性能的JS撰写好书并发表精彩演讲，我们中的一些人在活动代表团等方面做得更好

在过去的几年里，越来越多的人开始使用设计模式，这种模式在企业使用的其他语言中也可以看到

当谈到web应用程序的客户端异步编程时，诸如承诺/延迟/未来（

$。延迟

/

$。当

时）是JS工程的未来

这并不是说它看起来会100%像今天一样，而是说保持DOM事件的正确性是一个已解决的问题——使它们与页面上任何小部件中随时可能发生的所有异步内容保持一致…
…这就是承诺派上用场的地方

然后你有主持人/观察员来保证模块间通信的安全和解耦。
这些可能是“自定义事件”，也可能是“发射器”。。。或“发布者/订阅者”。
你可以倾听并付诸行动的事情。
它们可能由实际的浏览器事件触发，也可能由代码触发

同样，jQuery并没有发明或完善这一点，但您在jQuery中订阅的任何事件都是在幕后进行的

与

$.ajax相同——它不是真正使用DOM事件，而是传递承诺，您可以订阅这些承诺。它使用的唯一DOM事件是从服务器实际检索数据的事件。在那之后，一切都是习俗

在过去几年中，我们在JS的功能以及如何处理交互和异步方面取得了巨大的飞跃

这与
addEventListener
如何变得更好，或者jQuery如何帮助我们弥合IE8与其他浏览器之间的差距方面的进步没有什么关系
1.Javascript与html的交互是通过事件处理的。这些事件指示特定时刻在浏览器窗口或文档中发生的时间。这些事件可以由侦听器处理。
2.event bubbling表示-事件从触发事件的位置开始，并向上流向文档级别。
i、 e-div主体html文档。
例子：
1.
这里，事件侦听器函数将有一个名为event的本地默认对象。这将说明触发的事件的类型。
2.
这里表示事件目标元素

T
(function () {
    var button = document.getElementById("button"),
        old_func = button.onclick;

    button.onclick = function (e) {
        e = e || window.event;
        doStuff();
        if (old_func) { old_func(); }
    }
}());