先测试下：

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

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