为什么冒泡不起作用
我只是想了解捕获和冒泡是如何工作的。
不幸的是，这段代码只能在 IE 中运行，而不能在 Firefox 中运行。
当我点击 div3 时，它就停在那里；它并没有向身体元素冒泡。 有人可以启发我吗？
<!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>
I just want to understand how capturing and bubbling work.
Unfortunately this code just work in IE, and not working in Firefox.
When I click on div3, it just stop there; it is not bubbling up toward body element.
Can somebody enlighten me?
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不确定你到底看到了什么，但是当我在 Win7 上的 FF3.6 中打开页面并单击 div 3 时，我看到了我所期望的内容：“在元素主体中”，然后是 div1，然后是 div2，最后是 div3 。换句话说，我按捕获顺序查看警报。
您在 IE 中看到冒泡是因为，据我所知，IE 只进行冒泡，从不进行捕获。
您应该看到 FF 中的捕获，因为您通过传递“true”作为 4 个 addEvent 调用的最后一个参数来告诉事件以捕获模式侦听。将这四个更改为“false”，您将看到冒泡顺序。
I'm not sure exactly what you are seeing, but when I open the page in FF3.6 on Win7 and click on div 3, I see what I would expect: "In element body", then div1, then div2 and finally div3. In other words, I see the alerts in capturing order.
You are seeing bubbling in IE because, AFAIK, IE only does bubbling and never does capturing.
You should be seeing capturing in FF, because you are telling the events to listen in capturing mode by passing "true" as the last parameter of the 4 addEvent calls. Change those four to "false" and you will see bubbling order.