使用捕获事件监听器（useCapture=true）的陷阱及其对策

最新推荐文章于 2023-02-01 11:31:20 发布

转载最新推荐文章于 2023-02-01 11:31:20 发布 · 885 阅读

文章标签：

#function #safari #div #javascript #浏览器 #webkit

组件专栏收录该内容

330 篇文章 ¥19.90 ¥99.00

订阅专栏

本文探讨了在JavaScript中使用捕获事件监听器（useCapture=true）时可能遇到的问题，特别是在Safari和WebKit浏览器中。通过示例代码展示了如何设置事件监听器，并解释了事件流的捕获阶段。内容包括对捕获事件监听器的正确理解和使用，以及针对潜在问题的解决策略。

DOM event flow有三个phase，capture、target和bubble。通常我们只在后两个阶段处理事件，也即在调用addEventListener (type, listener, useCapture)时，useCapture设为false。偶尔可能会使用所谓捕获事件监听器（Capturing Event Listeners），即useCapture设为true。但有一个很搞的问题，那就是在event.currentTarget等于 event.target的时候（即event flow处于target phase时），是否会调用添加到currentTarget上的useCapture为true的listener？

不同浏览器在这一点上存在分歧。各版本的Firefox和最新版本的Safari会调用，而Opera和老版本的Safari就不会调用。

有人认为DOM Level 2事件规范在这一点上存有歧义，但如果仔细分析，可以确定DOM 2规范的意思确实是不应在目标阶段（target phase）调用捕获事件监听器，W3C发布的测试套件（test suite）也测试了这一点，DOM 3事件规范的草案也再次明确了这一点。

然而基于种种原因，所有版本的Gecko引擎（Firefox等浏览器）和最近版本的WebKit引擎（Safari等浏览器）都会在目标阶段调用包括捕获事件监听器在内的所有监听器，并且有些人认为应该据此修改DOM规范。这种看法确实也存在一定的合理性。

具体情况可参考：
https://bugzilla.mozilla.org/show_bug.cgi?id=235441
http://bugs.webkit.org/show_bug.cgi?id=9127

总之，这一问题在短期内可能不会有确定的结果。无论如何，在使用捕获处理器时应注意避免这一不确定行为的影响。

Gotchas

元素所对应的区域如果有一部分不在任何子元素内（如文本节点），严格遵循DOM规范的浏览器，就不会执行对应的捕获事件监听器。

Html代码

<div id="div1">
As DOM spec, <strong>Only this area</strong> will trigger
the capturing event listener for click event on the containing
div element.
</div>
<script>
var div1 = document.getElementById('div1');
div1.addEventListener('click', function () { alert('ok'); }, true);
</script>

<div id="div1"> As DOM spec, <strong>Only this area</strong> will trigger the capturing event listener for click event on the containing div element. </div> <script> var div1 = document.getElementById('div1'); div1.addEventListener('click', function () { alert('ok'); }, true); </script>

又如，如果同一个监听器，在同一个元素上注册两次，一次useCapture为true，一次为false，那么在严格遵循DOM规范的浏览器中，监听器在整个event flow中只会被调用一次；反之则会被连续调用两次，而且函数自身是无法判断到底是作为捕获事件监听器被调用，还是作为非捕获事件监听器被调用。当然，实际上是先调用捕获事件监听器再调用非捕获事件监听器的，但是如果加上target对象上的event handler（即onclick之类的事件属性），就又产生了微妙的顺序问题。Gecko的顺序是先执行handler再执行监听器，而WebKit的顺序是先执行捕获事件监听器，再执行handler，最后执行非捕获事件监听器。

Workaround

为了解决这类不确定性，可以采用一个通用的模式如下：

Javascript代码

node.addEventListener(type, listener, true);
function listener(evt) {
if (evt.currentTarget == evt.target) return;
...
}

node.addEventListener(type, listener, true);  function listener(evt) {   if (evt.currentTarget == evt.target) return;   ... }

这样就确保了不会在target阶段执行捕获事件监听器。我们也可以判断 evt.eventPhase != evt.CAPTURING_PHASE，但是浏览器的eventPhase也可能有bug，所以最好直接判断currentTarget是否等于 target。

此外，有些时候我们反而希望确保在target阶段执行（这也正是认为应该修改DOM规范的理由之一）。可以采用以下模式：

Javascript代码

node.addEventListener(type, listener1, true);
node.addEventListener(type, listener2, false);
function listener1(evt) {
if (evt.currentTarget == evt.target) return;
...
}
function listener2(evt) {
if (evt.currentTarget != evt.target) return;
...
}

node.addEventListener(type, listener1, true); node.addEventListener(type, listener2, false);  function listener1(evt) {   if (evt.currentTarget == evt.target) return;   ... } function listener2(evt) {   if (evt.currentTarget != evt.target) return;   ... }

或者

Javascript代码

node.addEventListener(type, listener, true);
node.parentNode.addEventListener(type, listener, true);
function listener(evt) {
if (evt.currentTarget == node.parentNode && evt.target != node
|| evt.currentTarget == evt.target) return;
...
}

node.addEventListener(type, listener, true); node.parentNode.addEventListener(type, listener, true);  function listener(evt) {   if (evt.currentTarget == node.parentNode && evt.target != node   || evt.currentTarget == evt.target) return;   ... }

在执行顺序上，前者类似Gecko的行为，后者类似WebKit的行为。

而且最好不要使用后者，因为它强制要求事件监听器引用target节点，从而构成了闭包，这降低了listener的可重用性。

总的来说，我建议应尽可能避免使用useCapture=true，因为绝大多数需求都应在target和bubbling阶段处理，特别是涉及 UI的事件。如果确实有必要使用捕获事件处理器，应优先考虑符合当前DOM规范的约束，即不在target阶段执行它。这意味着，useCapture应该用于拦截符合条件的子节点事件（许多事件常常仅限于元素），而不是用于一般的事件响应。

Trackback: http://tb.blog.youkuaiyun.com/TrackBack.aspx?PostId=2101666

[ 收藏到我的网摘] [ 发送Trackback] hax发表于 2008年02月18日 01:44:00

href="http://blog.youkuaiyun.com/hax/Services/Pingback.aspx" rel="pingback" />