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" + " "; }, 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>

结果：inDivmiddleDivoutDiv

区别说明

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 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() {if ( jQuery.isReady ) {return;}try {// If IE is used, use the trick by Diego Perini// document.documentElement.doScroll("left");} catch(e) {setTimeout( doScrollCheck, 1 );return;}// and execute any waiting functionsjQuery.ready();}这里bindReady

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

，人总是珍惜未得到的，而遗忘了所拥有的

相关文章：

你感兴趣的文章：

标签云：