addEventListener－第三个参数 useCapture

来源：互联网发布：pdf.js使用方法编辑：程序博客网时间：2024/05/22 21:02

转载自：http://www.cftea.com/c/2008/10/MQ0U26KP565GNM5Q.asp
addEventListener－开始
addEventListener－事件流
addEventListener－第三个参数 useCapture
addEventListener－event 对象的属性和方法
addEventListener－有用的笔记

addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture，本文就讲解它。

<div id="outDiv">
<div id="middleDiv">
<div id="inDiv">请在此点击鼠标。</div>
</div>
</div>

<div id="info"></div>

上述是我们测试的代码，根据 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"><!--//千一网络 www.cftea.comvar 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>