首页 > html事件捕获阶段如何查找目标节点?

html事件捕获阶段如何查找目标节点?

代码部分参考http://www.cnblogs.com/Johnny_Z/archive/2012/06/17/2552585.html

从这幅图可以看出事件捕获阶段从html节点开始,到img节点结束。html结构是一棵树,是有多条路径的,捕获阶段是如何查找到img节点的?直觉是遍历算法(深度/广度?优先)。
测试了下并没有打印其查找过程,没有打印出id="aaa"。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="zepto-core.js" type="text/javascript"></script>
    <script type="text/javascript">
$(function () {
  $('*').each(function () {
    var current = this;
    this.addEventListener('click', function (event) {
      say('捕获' + current.tagName + '元素,id为' + current.id + ',目标元素:' + event.target.id);
    }, true);
    this.addEventListener('click', function (event) {
      say('冒泡' + current.tagName + '元素,id为' + current.id + ',目标元素:' + event.target.id);
    }, false);
  })
});
function say(text) {
  $('#show').append('<div>' + text + '</div>');
}
</script>
</head>
<body>
    <div id='father'>
        <div id="aaa">test</div>
        <div id='son'>
            <img id="flower" alt="" src="2015-09-24_160558.png" width="300px" height="200px" />
        </div>
    </div>
    <div id="show"></div>
</body>
</html>

请问捕获阶段是如何查找到目标节点的?遍历还是其他机制?


锋利的jquery(第2版) 第112页写到:遗憾的是,并非所有主流浏览器都支持事件捕获,并且这个缺陷无法通过javascript来修复。Jquery不支持事件捕获,如果读者需要使用事件捕获,请直接使用原生的Javascript。
没有回答你的问题,但是可能对你有所帮助吧

【热门文章】
【热门文章】