先测试下:
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" + "<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
作为事件绑定对象进行处理了。。。。。