juquery源码研究：addEventListener与attachEvent区别

先测试下：

debugger   if(!window.attachEvent && window.addEventListener)    {    Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent=    HTMLElement.prototype.attachEvent=function(en, func, cancelBubble)    {    var cb = cancelBubble ? true : false;    this.addEventListener(en.toLowerCase().substr(2), func, cb);    };    }   window.onload=function(){    var outDiv = document.getElementById("outDiv");   var middleDiv = document.getElementById("middleDiv");   var inDiv = document.getElementById("inDiv");   var info = document.getElementById("info");    /* outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);   middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);   inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false); */

    outDiv.attachEvent("onclick", function () { info.innerHTML += "outDiv" + "<br>"; }, false);   middleDiv.attachEvent("onclick", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);   inDiv.attachEvent("onclick", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

       }

<div id="outDiv">
   <div id="middleDiv">
     <div id="inDiv">请在此点击鼠标。</div>
   </div>
</div>


<div id="info"></div>

结果：inDiv
middleDiv
outDiv

区别说明

1、

cancelBubble=false

 addEventListener执行事件冒泡顺序由内到外。

<span style="line-height: 1.5; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12pt;">true 的触发顺序总是在 false 之前；</span><br style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:12px; line-height: 19.5px;" /><span style="line-height: 1.5; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12pt;">如果多个均为 true，则外层的触发先于内层；</span><br style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:12px; line-height: 19.5px;" /><span style="line-height: 1.5; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12pt;">如果多个均为 false，则内层的触发先于外层。</span>

<span style="font-size: 12pt; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; line-height: 19.5px; background-color: rgb(255, 255, 255);"></span>

<span style="font-size: 12pt; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; line-height: 19.5px; background-color: rgb(255, 255, 255);">2、适应的浏览器版本不同</span>

attachEvent方法适用于IE    addEventListener方法适用于FF

3、针对的事件不同

attachEvent中的事件带on   而addEventListener中的事件不带on

那么jquery源码这2个事件又如何兼容的呢？

bindReady: function() {if ( readyList ) {return;}readyList = jQuery.Callbacks( "once memory" );// Catch cases where $(document).ready() is called after the// browser event has already occurred.if ( document.readyState === "complete" ) {// Handle it asynchronously to allow scripts the opportunity to delay readyreturn setTimeout( jQuery.ready, 1 );}// Mozilla, Opera and webkit nightlies currently support this eventif ( document.addEventListener ) {// Use the handy event callbackdocument.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );// A fallback to window.onload, that will always workwindow.addEventListener( "load", jQuery.ready, false );// If IE event model is used} else if ( document.attachEvent ) {// ensure firing before onload,// maybe late but safe also for iframesdocument.attachEvent( "onreadystatechange", DOMContentLoaded );// A fallback to window.onload, that will always workwindow.attachEvent( "onload", jQuery.ready );// If IE and not a frame// continually check to see if the document is readyvar toplevel = false;try {toplevel = window.frameElement == null;} catch(e) {}if ( document.documentElement.doScroll && toplevel ) {doScrollCheck();}}}

// The DOM ready check for Internet Explorerfunction doScrollCheck() {<span style="white-space:pre"></span>if ( jQuery.isReady ) {<span style="white-space:pre"></span>return;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>try {<span style="white-space:pre"></span>// If IE is used, use the trick by Diego Perini<span style="white-space:pre"></span>// http://javascript.nwbox.com/IEContentLoaded/<span style="white-space:pre"></span>document.documentElement.doScroll("left");<span style="white-space:pre"></span>} catch(e) {<span style="white-space:pre"></span>setTimeout( doScrollCheck, 1 );<span style="white-space:pre"></span>return;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>// and execute any waiting functions<span style="white-space:pre"></span>jQuery.ready();}

这里bindReady

作为事件绑定对象进行处理了。。。。。