JavaScript事件处理历史

问题描述:

虽然我理解JavaScript事件中的点点滴滴处理,我想了解它背后的完整的历史,像事件处理实际是如何实现(可能使用它像<a onClick="callFunc()">标记内)JavaScript事件处理历史

以及它如何后来得到更新,像从JS调用它(不显眼的JS)

它现在如何使用jQuery实现?

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

+2

您正在索要一篇小论文。我认为你需要让你的问题更加简洁和专注,以便一个人可以在合理大小的答案中回答,以适应*问答格式。除了好奇之外,你真的需要知道什么具体的事情? – jfriend00 2013-02-18 08:13:09

+0

我只是想了解Javascript事件处理机制多年来发展的方式,特别是像jQuery这样的框架如何改变事件处理的方式。它为桌子带来了哪些改进? – testndtv 2013-02-18 08:15:51

+1

[Quirksmode.org有很好的介绍](http://quirksmode.org/js/introevents.html),涵盖了大部分的问题。 – Bergi 2013-02-18 08:28:38

好了,没有多少吧。或者,实际上,它发生的任何事情都是在很久以前发生的。

.addEventListener已经存在,只要CSS有。 这就是DOM-Level2与我们在一起的时间(约13年,我认为)。

这是不是JS如何得到更高级的一个问题,它的JS-作家没怎么的问题。

程序员我知道,谁写JS作为“二级”或“三级”角色仍然使用内联处理程序。 这已经超过十年了,因为这是一个特别好的主意。

至于“不显眼”,这不一定直接与事件监听器相关。
就是说,如果你打算以任何方式与用户进行交互,但它更多的是分离问题的问题,我们不再像<p><font color=red>red text</font></p>那样设计元素。

的是DOM-0的事件处理程序(如button.onclick = function() {})都挂着这么久,仍然看得很频繁使用的原因也许是一个组成部分,是因为微软的attachEvent和W3C的addEventListener之间的战争。

如果你想支持IE6-8跨浏览器的事件,你要么使用jQuery(或其他图书馆),你手写的事件管理功能,同时支持.attachEvent针对IE和.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级不同的程序员加入听众同一按钮办法。

至于冒泡与捕获...
这从来没有真正的战斗(后Netscape)。
微软支持泡泡,W3C同时支持。没有人真的使用捕获来捕获任何东西,因为在事件真正发生之前,甚至在目标知道它正在发生之前,你很少想知道事件(并且因为使用捕获的唯一方法是使用addEventListener,这意味着您的活动无法在IE上运行...)

什么jQuery带到桌子上不是“新”事件或“更好”的事件 - 它所做的事情是允许所有人编写跨浏览器事件。
许多AJAX库都将此作为主要目标:在addEventListenerattachEvent(这是jQuery之前已解决的问题)之间,以及XMLHttpRequestActiveXObject("MSXML2.XMLHTTP.6.0")之间(再次解决的pre-jQuery)之间的差异归一化。 jQuery刚刚赢得了众人的喜爱,并且Resig用它做了一些很好的事情(当jQuery用户用它做了一些可怕的事情时,迫使Resig和朋友成为超人类的笨蛋证明DOM遍历和事件授权等)。

过去6年来,我们中的一些人在事件授权等方面做得更好,因为像道格拉斯克罗克福德和尼古拉斯扎卡斯这样的人占据了社会领域的统治地位,写了很好的书籍和伟大的谈话专业,高性能的JS。

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

类似承诺/延期/期货($.Deferred/$.when)的东西是JS工程的未来,当谈论客户端的Web应用程序的异步编程。

这并不是说它看起来像现在这样100%,但它是说保持DOM事件的直接是一个解决的问题 - 保持它们与所有可能发生的异步事件一致在任何时候,在页面上的任何插件...
...这就是Promise派上用场的地方。

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

同样,jQuery没有发明或完善这个,但是你在jQuery中订阅的任何事件都是在这些背后做的。

$.ajax相同 - 它并不真正使用DOM事件,它传递的是Promises,您可以订阅它。它使用的唯一DOM事件是实际从服务器检索数据的事件。之后,这都是习惯。

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

这与之前addEventListener的改进有些关系,或者jQuery如何帮助我们弥合IE8和其他浏览器之间的差距。

+0

我仍然偶尔使用事件处理程序属性,通常(但并非总是)原型时:它仍然是添加事件处理程序的最快方法。 – 2013-02-18 14:39:56

根据我的理解 1. Javascript与html的交互是通过events来处理的,它指明了什么时候在浏览器窗口或文档中出现特定时刻。这些事件可以由听众处理。 2.事件冒泡说 - 事件开始于事件被触发并且向上流向文档级别的位置。 ie-div-body-html-document。例如: 1。 这里的事件监听器函数将有一个名为event的本地默认对象。这将说明事件的类型。 2. 这里说的是事件目标元素。

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

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