先测试下:
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
作为事件绑定对象进行处理了。。。。。
分享到:
相关推荐
在JavaScript中,处理DOM事件监听有两个主要的方法:`addEventListener` 和 `attachEvent`。这两个方法在功能上相似,但存在一些关键的区别,特别是在浏览器兼容性和事件处理方式上。 `addEventListener` 是W3C标准...
在JavaScript中,`...以上就是关于 `attachEvent` 和 `addEventListener` 的使用方法及其区别的详细介绍,它们在JavaScript事件处理中起着至关重要的作用。正确理解和使用这些方法可以提高代码的健壮性和兼容性。
2. **`attachEvent`**: 与`addEventListener`不同,`attachEvent`在IE中执行事件处理函数时,`this`会指向绑定事件的元素,通常是全局对象`window`。当点击`test1`时,所有浏览器的行为一致,因为`onclick`属性直接...
本知识点将介绍 JavaScript 中两种常用的方法:attachEvent 和 addEventListener,以及它们在不同浏览器中的应用和区别。 首先,attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法,它的语法是:...
JavaScript 重新引入:addEventListener 这是 CodeGrid“重新介绍 JavaScript:addEventListener”一文中使用的示例。请查看以上文章以了解每个示例的解释。
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点、document、window 或 XMLHttpRequest。 type: 字符串,事件名称,不含“on”,比如“click”...
首先,我们需要理解`attachEvent`与`addEventListener`的区别。`attachEvent`是IE4至IE8特有的事件绑定方式,而`addEventListener`则是一种更通用、更符合W3C标准的方法,被现代浏览器广泛支持。当我们在IE11中尝试...
事件监听器 如果您需要支持旧版IE,则addEventListener()与addEvent()简单函数。安装npm install event-listener用法var listen = require ( 'event-listener' )// Returns an object with a .remove() methodvar ...
可以与发出事件的任何事物一起使用: addEventListener addListener attachEvent addEvent 在以下情况下特别有用: 在生命周期钩子上添加/删除处理程序 添加使用bind处理程序,需要删除 方便地删除所有添加的...
事件处理程序 用法 var obj = { } ;... addEventListener ( 'wee' , function ( ) { // wee was trigger! } ) ; // trigger the event obj . dispatchEvent ( 'wee' ) ; EventHandler . destroyTarget ( obj ) ;
本压缩包中的“H5游戏源码 打字游戏.zip”提供了一个以打字练习为主题的H5游戏的完整源代码,为开发者提供了学习和研究的宝贵资源。本文将深入探讨这个打字游戏的源码结构、设计原理以及关键知识点。 一、源码结构...
在这个切水果游戏中,JavaScript负责处理用户输入、计算游戏逻辑、更新屏幕显示以及与服务器的通信(如果有的话)。例如,通过监听用户的鼠标或触摸事件,JavaScript可以判断玩家何时切到了水果,然后执行相应的得分...
3. **事件监听**:通过addEventListener或attachEvent来捕获用户交互,如点击、触摸移动等,实现游戏的响应式控制。 4. **动画框架**:如requestAnimationFrame,用于平滑地更新游戏帧,提高性能并减少浏览器资源...
2. **事件监听与处理**:通过addEventListener或attachEvent等方法监听用户的交互事件,如点击、输入等,触发相应的过滤逻辑。 3. **数组操作**:产品数据通常以数组形式存在,使用filter、map、reduce等数组方法...
### JavaScript中的事件处理:attachEvent与addEventListener #### 一、引言 JavaScript 是一种广泛使用的脚本语言,它被用于实现网页的动态效果和交互功能。随着 Web 技术的发展,浏览器之间的差异也逐渐显现出来...
在本资源"java源码:JavaScript万年历.rar"中,我们主要关注的是一个使用JavaScript编写的万年历程序。JavaScript是一种广泛应用于网页和网络应用的脚本语言,它允许开发者在用户浏览器端动态更新页面内容,实现丰富...
这个压缩包中的"经典HTML5小游戏h5...每款游戏都有其独特的设计和实现方式,深入研究这些源码,你将能够掌握更多关于HTML5游戏开发的技巧和最佳实践。此外,这些源码也适合作为模板,启发你创作出自己的HTML5小游戏。
JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件,例如点击、鼠标悬停、键盘输入等,JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...