我只想了解捕获和冒泡是如何工作的。
不幸的是，这段代码只是在IE中工作，而不是在Firefox中工作。
当我点击div 3时，它只是停在那里;它并没有向身体元素冒泡。有人能给我点化一下吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
var addEvent = function(elem, event, func, capture){
if(typeof(window.event) != 'undefined'){
elem.attachEvent('on' + event, func);
}
else{
elem.addEventListener(event, func, capture);
}
}
var bodyFunc = function(){
alert('In element body')
}
var div1Func = function(){
alert('In element div1')
}
var div2Func = function(){
alert('In element div2')
}
var div3Func = function(){
alert('In element div3')
}
var init = function(){
addEvent(document.getElementsByTagName('body')[0], 'click', bodyFunc, true);
addEvent(document.getElementById('div1'), 'click', div1Func, true);
addEvent(document.getElementById('div2'), 'click', div2Func, true);
addEvent(document.getElementById('div3'), 'click', div3Func, true);
}
addEvent(window, 'load', init, false)
</script>
</head>
<body>
<h1>Using the Modern Event Model</h1>
<div id="div1" style="border:1px solid #000000;padding:10pt;background:cornsilk">
<p>This is div 1</p>
<div id="div2" style="border:1px solid #000000;padding:10pt;background:gray">
<p>This is div 2</p>
<div id="div3" style="border:1px solid #000000;padding:10pt; background:lightBlue">
<p>This is div 3</p>
</div>
</div>
</div>
</body>
</html>
1条答案
按热度按时间rsaldnfx1#
我不确定您看到的是什么，但是当我在Win7上的FF3.6中打开页面并单击div 3时，我看到了我所期望的内容：“In element body”，然后是div1，然后是div2，最后是div3。换句话说，我看到的警报是按捕获顺序排列的。
你在IE中看到冒泡是因为，AFAIK，IE只做冒泡，从来不做捕获。
您应该看到在FF中捕获，因为您通过传递“true”作为4个addEvent调用的最后一个参数来告诉事件在捕获模式中侦听。将这4个参数更改为“false”，您将看到冒泡顺序。