代码部分参考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。
没有回答你的问题,但是可能对你有所帮助吧