执行条件：页面加载完毕
需要注意的是，如果存在多个winodws.onload的话，只有最有一个生效，解决这个办法是：
1、window.onload = function() {f(); f1(); f2(); ...}
2、if(window.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{ //ie
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', handler, false); //firefox
window.addEventListener('load', handler, false);
} else if (window.attachEvent) {
window.attachEvent('onload', handler); //IE
}
;
addEventListener－事件流讲解
说到 addEventListener 不得不说到事件流，先说事件流对后面的解释比较方便。
当一个事件发生时，分为三个阶段：
捕获阶段 从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）
目标阶段 触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。
冒泡阶段 从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。
举例
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
</div>
如果在 d3 上点击鼠标，事件流是这样的：
捕获阶段 在 div1 处检测是否有 useCapture 为 true 的事件处理程序，若有，则执行该程序，然后再同样地处理 div2。
目标阶段 在 div3 处，发现 div3 就是鼠标点击的节点，所以这里为目标阶段，若有事件处理程序，则执行该程序，这里不论 useCapture 为 true 还是 false。
冒泡阶段 在 div2 处检测是否有 useCapture 为 false 的事件处理程序，若有，则执行该程序，然后再同样地处理 div1。
注意，上述捕获阶段和冒泡阶段中，实际上 div1 之上还应该有结点，比如有 body，但这里不讨论。
addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture，本文就讲解它。
<div id="outDiv">
<div id="middleDiv">
<div id="inDiv">请在此点击鼠标。</div>
</div>
</div>
<div id="info"></div>
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);
上述是我们测试的代码，根据 info 的显示来确定触发的顺序，有三个 addEventListener，而 useCapture 可选值为 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。
全为 false 时，触发顺序为：inDiv、middleDiv、outDiv；
全为 true 时，触发顺序为：outDiv、middleDiv、inDiv；
outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv；
middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv；
……
最终得出如下结论：
true 的触发顺序总是在 false 之前；
如果多个均为 true，则外层的触发先于内层；
如果多个均为 false，则内层的触发先于外层。
下面提供全部代码，您可以更改其中的 true、false 值，来进行测试。注意，不适用于 IE。
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>useCapture</title>
<style type="text/css">
#outDiv
{
padding:10px 10px 10px 10px;
border:1px solid red;
}
#middleDiv
{
padding:10px 10px 10px 10px;
border:1px solid green;
}
#inDiv
{
padding:10px 10px 10px 10px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="outDiv">
<div id="middleDiv">
<div id="inDiv">请在此点击鼠标。</div>
</div>
</div>
<div id="info"></div>
<script language="javascript" type="text/javascript">
<!--
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);
//-->
</script>
</body>
</html>
分享到：
相关推荐
- `window.onload`和`window.addEventListener('load')`: 当整个页面加载完成时触发的事件，常用于页面初始化操作。 4. 跨域安全：在现代浏览器中，出于安全考虑，`window.open()`可能受到同源策略的限制，无法...
本文将详细讲解JavaScript处理事件绑定的一些兼容性写法，适用于不同的浏览器环境。 首先，让我们看一个基本的事件绑定函数的实现。这个函数`addEvent`接受三个参数：目标对象`obj`，事件类型`type`，以及事件处理...
本文将详细讲解如何通过JS实现在一个页面传递数据，并在另一个页面中将其显示出来。 首先，我们要了解JavaScript在不同页面间传递数据的几种常见方法： 1. **URL参数**：可以通过在URL后面添加查询字符串来传递...
本篇文章将详细讲解如何通过JavaScript（JS）实现这一功能，并介绍四种不同的方法来达到全屏显示的效果。 ### 方法一：使用浏览器API `requestFullScreen` 现代浏览器提供了一个原生的全屏API，允许网页元素请求...
本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解，主要集中在JavaScript的DOM操作和窗口对象（Window）的属性与方法上。 1. **当前页面可视区域尺寸**...
在JavaScript（JS）中，获取iframe（内联框架）的高度是一项常见的需求，特别是在构建富互联网应用或嵌入第三方内容时。下面将详细讲解如何静态和动态地获取iframe的高度。 一、静态获取iframe高度 1. **DOM属性...
以上内容只是`window`对象的基本知识点，实际应用中还有很多其他特性和用途，比如`window.localStorage`和`window.sessionStorage`用于本地存储数据，`window.navigator.geolocation`用于获取地理位置等。...
最后，我们总结了在实际应用中如何根据不同情况选择使用`DOMContentLoaded`或`window.onload`。 通过掌握这些知识，开发者可以在不依赖jQuery库的情况下，实现页面加载完成后执行特定操作的功能。这不仅有助于提升...
总结来说，JavaScript中实现文档加载完成后执行代码的方法主要有两种：一是绑定`window.onload`事件，二是监听`DOMContentLoaded`事件。这两种方法都可以确保代码在DOM结构准备就绪后执行，避免因早于预期的时间点...
为了使引导层在页面加载后自动显示，我们可以在JavaScript中使用`window.onload`事件或`DOMContentLoaded`事件，如下所示： ```javascript window.onload = function() { var guideLayer = document....
window.onload = function() { document.getElementsByTagName('body')[0].addEventListener('mousedown', mouseDown, false); } function mouseDown(e) { var e = e || event; console.log(e); } ``` 在...
JavaScript（JS）是一种广泛用于网页和网络应用的编程语言，主要负责实现客户端的交互效果。在前端开发中，DOM（Document Object Model）是HTML和XML文档的结构化表示，允许我们通过JavaScript操作页面上的元素。...
这份PPT将详细讲解这些知识点，通过实例演示和练习，帮助你快速上手JavaScript，无论是网页开发还是Node.js后端开发，JavaScript都将是你不可或缺的工具。希望你在这个学习过程中能收获满满，享受JavaScript带来的...
例如，当页面加载完成时，我们可以监听`window.onload`事件，此时执行弹窗的显示代码。 2. **localStorage**： localStorage是Web存储的一个特性，它允许我们将数据存储在用户的浏览器上，且不会在浏览器会话结束...
本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案，确保在各种主流浏览器中都能正常工作。 首先，理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性，用于指定要加载的...
在IT行业中，JavaScript（简称JS）是一种常用的前端编程语言，用于实现网页的动态效果和交互。"js 遮盖居中"这个话题是关于如何使用JavaScript来创建一个覆盖整个屏幕并居中的遮罩层。这通常应用于弹出窗口、加载...
window.addEventListener("message", function(event) { if (event.origin !== "http://other-origin.com") return; if (event.data) { iframe.style.height = event.data + 'px'; } }); }; ``` **子页面...
使用JavaScript（简称js）实现长按二维码识别及上传二维码识别的功能，可以帮助用户更便捷地获取和处理二维码信息。以下将详细讲解如何实现这个功能。 首先，我们需要了解JavaScript中的事件监听。在这个案例中，...
本教程将详细讲解如何在网页中实现动态显示日期，且代码简洁易懂。 一、JavaScript基础 动态显示日期主要依赖于JavaScript，这是一种在客户端运行的脚本语言，它可以与HTML页面交互，实现实时更新内容的效果。...
4. **监听滚动事件**：使用`window.onscroll`或`addEventListener('scroll')`监听滚动事件，获取滚动位置。 ```javascript window.addEventListener('scroll', function() { var scrollTop = window.pageYOffset |...