3

虽然我确实了解点点滴滴的 Javascript 事件处理，但我想了解它背后的完整历史，例如事件处理的实际实现方式（可能在标记中使用它，例如<a onClick="callFunc()">）

以及它后来如何更新为其他东西，比如从 JS 调用它（不显眼的 JS）

现在如何使用 jQuery 实现它？

我只是想了解每个阶段的优势以及事件冒泡/捕获等

4

2 回答 2

4

好吧，没什么。或者，真的，任何与它有关的事情都发生在很久以前。

.addEventListener只要 CSS 就已经存在了。这就是 DOM-Level2 与我们在一起的时间（我认为大约 13 年）。

这不是 JS 如何变得更高级的问题，而是 JS-writers 如何没有的问题。

我认识的将 JS 编写为“二级”或“三级”角色的程序员仍然使用内联处理程序。自从这是一个特别好的想法以来，已经有十多年了。

至于“不引人注目”，这不一定与事件侦听器直接相关。
它是，如果你打算以任何方式与用户交互，但它更多的是分离关注点的问题，就像我们不再为元素设置样式一样<p><font color=red>red text</font></p>。

DOM-0 事件处理程序（如button.onclick = function () {}）存在这么久并且仍然经常使用的部分原因可能是因为 MicrosoftattachEvent和 W3C之间的战争addEventListener。

如果您想在 IE6-8 中支持跨浏览器事件，您要么使用 jQuery（或其他库），要么手动编写事件管理函数，以支持.attachEventIE 和.addEventListener其他所有人，或者您直接使用事件属性 ( .onclick = function () {})。它们的好处是得到了当今使用的几乎每一个浏览器的支持。
它们的缺点是只有一个可分配的功能（如果您需要添加更多功能，这会导致丑陋的处理）：

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

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

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

至于冒泡与捕获……
这从来都不是一场真正的战斗（后网景）。
微软支持气泡，W3C 两者都支持。没有人真正将捕获用于任何事情，因为在事件实际发生之前，甚至在目标知道它正在发生之前，您很少想知道它（并且因为使用捕获的唯一方法是使用 addEventListener，这意味着您的活动无法在 IE 上运行...）

jQuery 带来的不是“新”事件或“更好”事件——它所做的就是让每个人都可以编写跨浏览器事件。
许多 AJAX 库都以此为主要目标：规范化addEventListenerand attachEvent（这是一个已解决的问题，在 jQuery 之前）和 and 之间XMLHttpRequest的差异ActiveXObject("MSXML2.XMLHTTP.6.0")，（再次，解决了 pre-jQuery）。

jQuery 刚刚成为大众的最爱，Resig 用它做了一些好事（而 jQuery 用户用它做了一些可怕的事情，迫使 Resig 和朋友们成为超人，以防白痴的 DOM 遍历和事件委托和其余的）。

在过去的大约 6 年里，我们中的一些人在活动委托等方面做得更好，因为像 Douglas Crockford 和 Nicholas Zakas 这样的人在社会领域占据了统治地位，写了好书和关于专业、高级的精彩演讲性能 JS。

在过去的几年里，越来越多的人进入了设计模式，这些设计模式在其他语言中看到了企业使用。

当谈论 Web 应用程序的客户端异步编程时，诸如 promises/deferreds/futures ( $.Deferred/ ) 之类的东西是 JS 工程的未来。$.when

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

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

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

同样$.ajax——它并不是真正使用 DOM 事件，它是在传递 Promises，你可以订阅它。它使用的唯一 DOM 事件是实际从服务器检索数据的事件。在那之后，这一切都是惯例。

在过去的几年里，我们在 JS 可以做什么以及我们如何处理交互和异步性方面取得了巨大的飞跃。

addEventListener这与如何变得更好或 jQuery 如何帮助我们弥合 IE8 和其他浏览器之间的差距几乎没有任何关系。

于 2013-02-18T08:48:05.880 回答
0

根据我的理解 1. Javascript 与 html 的交互是通过事件来处理的。这表明特定时刻发生在浏览器窗口或文档中。这些事件可以由侦听器处理。2.event bubbling表示-event从事件被触发的位置开始并向上流动到文档级别。即-div-body-html-document。示例： 1. 这里的事件监听函数将有一个本地默认对象，称为事件。这将说明触发的事件类型。2. 这里说的是事件目标元素。

event.preventDefault() 方法阻止元素的默认操作发生。

分类事件组：用户交互事件/焦点事件/鼠标事件/滚轮事件/文本事件/键盘事件。这些事件会因移动设备而异。

于 2013-02-18T09:19:45.717 回答