为什么在这个简单的addEventListener函数之后使用“false”?
什么是最后的错误? 谢谢。
window.addEventListener('load', function() { alert("All done"); }, false);
根据MDC ,第三个参数是:
将useCapture
如果为true
,则useCapture
表示用户希望启动捕获。 启动捕获后,指定types的所有事件将被分派到注册的listener
然后被分派到DOM树下的任何EventTarget
。 在树中冒泡的事件不会触发指定使用捕获的侦听器。 有关详细说明,请参阅DOM Level 3事件 。
我也检查了MDN,但是我还是不明白useCapture
是什么,所以这个答案适用于那些在检查官方文档后仍然没有得到的答案。
所以首先,几乎所有的浏览器都会出现以下情况:
在所有浏览器中,除IE <9外,还有两个事件处理阶段。
事件首先下降 – 这就是所谓的捕捉 ,然后起泡 。 这种行为在W3C规范中是标准化的。
这意味着无论你设置useCapture
为什么,这两个事件阶段总是存在的。
这张图片显示了它的工作原理。
根据这个模型,事件:
捕获下来 – 通过1 – > 2 – > 3。
气泡上升 – > 3 – > 2 – > 1。
然后出现你的问题。 名为useCapture
的第三个参数指示您希望处理程序处理事件的两个阶段中的哪一个。
useCapture = true
处理程序设置在捕获阶段。 活动将得到它的孩子之前。
useCapture = false
。处理程序设置在冒泡阶段。 活动将得到它的孩子后得到它。
这意味着如果你写这样的代码:
child.addEventListener("click", second); parent.addEventListener("click", first, true);
当点击子元素时, first
方法将在second
之前调用。
默认情况下, useCapture
标志被设置为false ,这意味着你的处理程序只会在事件冒泡阶段被调用。
有关详细信息, 请单击此参考链接和此 。
@天秤座的答案是非常好的,只是碰巧有些像我这样的人更了解代码与机器的交互。
所以下面的脚本应该解释事件传播。 基于这个描述模式我想要做的是:
下面的事件stream向下面的层次结构:
<window> <document> <body> <section> <div> <paragraph> <span>
为了简单起见,我们将从身体开始,直到span元素注册捕获阶段的处理程序,并返回注册处理程序的body元素用于冒泡阶段。 所以结果将是节点从开始到结束事件所采取的方向。 请点击代码片右侧的“显示控制台”来访问日志
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; }
<section ID="sectionID"> <div id="DivId"> <p id="PId"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis <span id="spanId">CLICK ME </span> imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq. </p> </div> </section>
它决定事件是否被捕获。
更多信息在这里