javascript事件系统的发展史

比眉伴天荒 2023-07-04 12:37 41阅读 0赞

一个完整的事件系统，通常存在以下三个角色：

*  事件对象，用于储存事件的状态。
 *  事件源对象，当前事件在操作的对象，如元素节点，文档对象，window对象，XMLHttpRequest对象等。
 *  事件监听器，当一个事件源生成一个事件对象时，它会调用相应的回调函数进行操作。在IE中，事件对象恒为全局属性window.event的分身。

在w3c没有把其DOM 模型引入网页时，netscape与微软已经逼不及待到快他们熟悉的语言中把相关的DOM模型搞进来了。这其实也怪javascript之父忙于把抄袭其他语言，忽略了自身事件系统的建设。从此世界被划分为两大阵营了。

DOM0时代，这里的DOM指w3c的DOM。双方都设计两种绑定事件的方法，无侵入式与侵入式。你可以说内联式与非内联式的区别。

侵入式，双方都一样。没有办法，那是很早就实现的。那时IE只有抄袭的份，还不敢胡来。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;</code><code>input</code>&nbsp;<code>name="ruby" onclick="alert(this.nam)" /&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

然后是无侵入式，这估计是它们都完成了各自的DOM模型，实现对元素节点的索引机制之后的事了。比如有以下网页片断：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;</code><code>form</code>&nbsp;<code>name="form1"&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;</code><code>input</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type="button"</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name="button1"</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>value="aaaa"/&gt;</code></p> <p><code>&lt;/</code><code>form</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

我们必须自上而下，一步步找到此元素节点才能操作它。注意，那时没有所谓的document.getElementById。网景的做法，把相关绑定的代码放进一个script标签中：

如果你不想把代码用window.onload = function()\{\}这代码块括起来，那么你得把这script标签放于表单元素之后。

微软也有一套索引机制，基本与网景的一样，但IE4还引入了document.all与document.all.tags。不过IE还有另一套方式：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;</code><code>script</code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>for="button1"</code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>event="onclick"</code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>language="JavaScript"&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert("this.aaa")</code></p> <p><code>&nbsp;</code><code>&lt;/</code><code>script</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

不过，它用不了this(或者能，我不会)，另要求一个script标签对应body中的一个标签，实在很浪费，最终被淘汰出局了。

这就是DOM0的绑定机制，另以内联方式写在标签中的代码，其实相当于以下方式：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;</code><code>p</code>&nbsp;<code>id="aa" onclick="alert('aaaa')"&gt;相当于↓&lt;/</code><code>p</code><code>&gt;</code></p> <p><code>&lt;</code><code>script</code>&nbsp;<code>type="text/javascript"&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>var p = document.getElementById("aa")</code></p> <p><code>&nbsp;&nbsp;</code><code>p.onclick = new Function("alert('aaaa')")//相当于↓</code></p> <p><code>&nbsp;&nbsp;</code><code>p.onclick = function(){alert('aaaa')}</code></p> <p><code>&lt;/</code><code>script</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

至此，事件系统三个角色都出场了。通过索引机制得到的对象（元素节点什么的），作为事件源，onclick,onmousemove之类的事件属性，它们充当监听器，onclick后面的函数就是回调函数，这是异步执行的。

随着无侵入的兴起，放到web标准中，应该叫做表现行为结构相分离。在标签内写onclick什么的应该唾弃。无侵入式编程有一种让人越写越多代码的欲望。以前总是缩在一个标签内，随时注意双引号与单引号的套嵌，写多了就烦了，不想写了，现在没有这限制，就像脱缰的马，把更多注意力用于兼容更多浏览器与创造新的点子上。好了，写着写着，人们就开始想能不能在同一个元素上绑定两个onclick事件呢？！

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;</code><code>script</code>&nbsp;<code>type="text/javascript"&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>var p = document.getElementById("aa")</code></p> <p><code>&nbsp;&nbsp;</code><code>p.onclick = function(){alert('第一次')}</code></p> <p><code>&nbsp;&nbsp;</code><code>p.onclick = function(){alert('第二次')}</code></p> <p><code>&lt;/</code><code>script</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

当然，只能alert第二个，我们当然也可以用一些技巧达到这目的:

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;</code><code>p</code>&nbsp;<code>id="aa" onclick="alert('第一次')"&gt;能绑定多个同类型函数&lt;/</code><code>p</code><code>&gt;</code></p> <p><code>&nbsp;</code><code>&lt;</code><code>script</code>&nbsp;<code>type="text/javascript"&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>var p = document.getElementById("aa")</code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>var addEvent = function(el,type,fn) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var type = "on"+type</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var old = el[type];</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (typeof el[type] != 'function') { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>el[type] = fn</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}else { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>el[type] = function() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>old();</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fn();</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>addEvent(p,"click",function(){alert('第二次')});</code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>addEvent(p,"click",function(){alert('第三次')});</code></p> <p><code>&lt;/</code><code>script</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

<!doctype html>
    <html lang="zh-ch">
      <head>
        <meta charset="utf-8" />
        <meta content="IE=8" http-equiv="X-UA-Compatible"/>
        <title>绑定多个事件对象 by 司徒正美</title>
        <script type="text/javascript">
          window.onload = function(){
            var p = document.getElementById("aa")
            var addEvent = function(el,type,fn) {
              var type = "on"+type
              var old = el[type];
              if (typeof el[type] != 'function') {
                el[type] = fn
              }else {
                el[type] = function() {
                  old();
                  fn();
                }
              }
            }
            addEvent(p,"click",function(){alert('第二次')});
            addEvent(p,"click",function(){alert('第三次')});
          }
        </script>
    
      </head>
      <body>
    
        <p id="aa" onclick="alert('第一次')">能绑定多个同类型函数(请点我)</p>
      </body>
    </html>

但当要用户搞这东西是不行，因此浏览器商把它们做成内置的。顺带还搞了个事件流，也就是允许事件对象在控件间（标签）中传递。IE的一套API是createEventObject， attachEvent， dettachEvent， fireEvent，事件流是自下向上。网景那套就不清楚了，但听说w3c也是从它那一套发展而来，API比较复杂，createEvent， initEvent，addEventListener， removeEventListener dispatchEvent，那个initEvent还有许多版本呢，如initMouseEvent， initKeyEvent，参数非常多，用于更精确的配置。addEventListener拥有三个参数，但第三个参数通常只在事件代理中有用，通常为false，与IE保持一致，自下而上的冒泡。由于w3c的劣性根，总想与IE划分界线，它最高能冒泡到window（IE为document）：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>event = dom.Event(type);</code></p> <p><code>args =&nbsp; [event].concat(args);</code></p> <p><code>var</code>&nbsp;<code>parent = caller;</code></p> <p><code>while</code><code>(!event.isPropagationStopped() &amp;&amp; parent){ </code><code>//isPropagationStopped为w3c dom的一个方法,</code></p> <p><code>&nbsp;&nbsp;</code><code>dom.events.handle.apply( parent,args);&nbsp;&nbsp;&nbsp;&nbsp; </code><code>//判定是否已禁止冒泡</code></p> <p><code>&nbsp;&nbsp;</code><code>parent = parent.parentNode || (parent != window) &amp;&amp; window;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

很奇怪的是HTML的parentNode竟然是文档对象。如果是捕获就麻烦多了，这里不谈它。现在看一下多事件绑定时的兼容问题吧。比如上面那个addEvent其实够用了，DE大神的addEvent也是根据DOM0事件搞出来的。但有一些事件是DOM0绝对模拟不了，如FF的DOMMouseScroll事件，因为没有onDOMMouseScroll这个属性，它必须要用addEventListener，但IE，opera，chrome等支持的mousewheel。因此我们还是离不开这些高级的API。一个通用addEvent函数：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>var</code>&nbsp;<code>addEvent = (</code><code>function</code>&nbsp;<code>() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(document.addEventListener) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>function</code>&nbsp;<code>(el, type, fn) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>el.addEventListener(type, fn, </code><code>false</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>else</code>&nbsp;<code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>function</code>&nbsp;<code>(el, type, fn) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>el.attachEvent(</code><code>'on'</code>&nbsp;<code>+ type, </code><code>function</code>&nbsp;<code>() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>fn.call(el, window.event);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>})();</code></p> </td> 
  </tr> 
 </tbody> 
</table>