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 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 Explorer
function 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

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

juquery源码研究：addEventListener与attachEvent区别

推荐阅读