先测试下：
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.οnlοad=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" + ""; }, false); middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + ""; }, false); inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + ""; }, false); */ outDiv.attachEvent("onclick", function () { info.innerHTML += "outDiv" + ""; }, false); middleDiv.attachEvent("onclick", function () { info.innerHTML += "middleDiv" + ""; }, false); inDiv.attachEvent("onclick", function () { info.innerHTML += "inDiv" + ""; }, false); }<div id="outDiv"> <div id="middleDiv"> <div id="inDiv">请在此点击鼠标。</div> </div> </div> <div id="info"></div>
结果：inDiv
middleDiv
outDiv
区别说明
1、
cancelBubble=false
addEventListener执行事件冒泡顺序由内到外。
true 的触发顺序总是在 false 之前；
如果多个均为 true，则外层的触发先于内层；
如果多个均为 false，则内层的触发先于外层。
2、适应的浏览器版本不同
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 ready return setTimeout( jQuery.ready, 1 ); } // Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.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 iframes document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work window.attachEvent( "onload", jQuery.ready ); // If IE and not a frame // continually check to see if the document is ready var toplevel = false; try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { doScrollCheck(); } } } // The DOM ready check for Internet Explorerfunction doScrollCheck() { if ( jQuery.isReady ) { return; } try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch(e) { setTimeout( doScrollCheck, 1 ); return; } // and execute any waiting functions jQuery.ready();} 这里 bindReady 作为事件绑定对象进行处理了。。。。。