为什么在这个简单的addEventListener函数之后使用'false'？
最后的错误是什么？谢谢.
window.addEventListener('load', function() {
alert("All done");
}, false);
lib*_*bra 277
我也检查了MDN,但我仍然不明白它的useCapture用途,所以这个答案适用于那些在检查官方文档后仍然没有得到它的人.
首先,几乎所有的浏览器都会发生以下情况:
在所有浏览器中,除了IE <9之外,还有两个阶段的事件处理.
事件首先下降 - 这称为捕获,然后冒泡.此行为在W3C规范中是标准化的.
这意味着无论你设置的useCapture是什么,这两个事件阶段总是存在的.
这张照片显示了它的工作原理.
根据这个模型,事件:
捕获 - 通过1 - > 2 - > 3.
气泡 - 通过3 - > 2 - > 1.
然后是你的问题.调用的第3个参数useCapture指示您希望处理程序处理事件的两个阶段中的哪个阶段.
useCapture = true处理程序设置在捕获阶段.在到达孩子之前,事件将会发生.
useCapture = false.处理程序设置在冒泡阶段.到达孩子后,活动就会到达.
这意味着如果你编写这样的代码:
child.addEventListener("click", second);
parent.addEventListener("click", first, true);
单击子元素时,first将调用方法second.
默认情况下,该useCapture标志设置为false,这意味着只有在事件冒泡阶段才会调用该处理程序.
- 非常好的解释.人情味,这才是最重要的. (14认同)
- 非常好的和全面的答案.我理解它比现在好多了. (11认同)
- 请注意，“useCapture = false”是默认值 (4认同)
Luc*_*nes 13
根据MDN Web Docs,第三个参数是:
useCapture
如果true,useCapture表示用户希望启动捕获.在启动捕获之后,指定类型的所有事件将被分派到已注册,listener然后被分派到EventTargetDOM树中它下面的任何s.向上冒泡树的事件不会触发指定使用捕获的侦听器.有关 详细说明,请参阅DOM Level 3 Events.
- 请解释一下,不要只是复制/粘贴. (28认同)
- 我不太了解javascript,所以我很难得到这个答案.我其实不知道useCapture是什么？你能告诉我一些关于它的事吗？ (20认同)
- 多么无用的复制粘贴。 (5认同)
- @BikashChandraMondal 查看下面的答案。 (2认同)
@Libra 的回答很好，正好有像我这样的人更了解代码与机器的交互。
所以下面的脚本应该解释事件传播。基于此描述架构，我试图做的是：
按照以下层次结构向下和向上的事件流：
<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>
为简单起见，我们将从 body 开始，直到捕获阶段的 span 元素注册处理程序，然后返回到冒泡阶段的 body 元素注册处理程序。所以结果将是一个节点一个节点的事件从开始到结束所采取的方向。请单击代码段右侧面板上的“显示控制台”以访问日志
<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>
function handler(e){
/* logs messages of each phase of the event flow associated with
the actual node where the flow was passing by */
if ( e.eventPhase == Event.CAPTURING_PHASE ){
console.log ("capturing phase :\n actual node : "+this.nodeName);
}
if ( e.eventPhase == Event.AT_TARGET){
console.log( "at target phase :\n actual node : "+this.nodeName);
}
if ( e.eventPhase == Event.BUBBLING_PHASE){
console.log ("bubbling phase :\n actual node : "+this.nodeName );
}
}
/* The following array contains the elements between the target (span and you can
click also on the paragraph) and its ancestors up to the BODY element, it can still
go up to the "document" then the "window" element, for the sake of simplicity it is
chosen to stop here at the body element
*/
arr=[document.body,document.getElementById("sectionID"),
document.getElementById("DivId"),document.getElementById("PId"),
document.getElementById("spanId")];
/* Then trying to register handelers for both capturing and bubbling phases
*/
function listener(node){
node.addEventListener( ev, handler, bool )
/* ev :event (click), handler : logging the event associated with
the target, bool: capturing/bubbling phase */
}
ev="click";
bool=true; // Capturing phase
arr.forEach(listener);
bool=false; // Bubbling phase
/* Notice that both capturing and bubbling
include the at_target phase, that's why you'll get two `at_target` phases in
the log */
arr.forEach(listener); p {
background: gray;
color:white;
padding: 10px;
margin: 5px;
border: thin solid black
}
span {
background: white;
color: black;
padding: 2px;
cursor: default;
}请注意，诸如 focus 之类的事件不会冒泡，这使得大多数事件仍然会冒泡。
| 归档时间： |
|
| 查看次数： |
29846 次 |
| 最近记录： |