JS事件捕捉测试

这两天在看“前沿视频教室“网站的js视频，看到第六课javascript事件，为了巩固其中的“事件监听”，做了个简单的demo学习。这是我的body内容：

<div id="judge">
<a>我是a</a>
<p>我是p</p>
<span>我是span</span>
</div>

我想通过点击div中相应的子标签 弹出标签内容。
于是我根据视频中的代码这样写js部分：

window.onload=function(){
var judge=document.getElementById("judge");
judge.onclick=judge_click;
function judge_click(e){
if(window.event) e=window.event; /*为IE写赋值*/
alert(e.target.innerHTML);
}
}

在谷歌、火狐中“成功”实现了，但是IE中却怎么点都没反应。做些调试后发现是target的问题，原来IE不支持target属性。好在IE有自己的“target”——srcElement。于是这里加个判断：

window.onload=function(){
var judge=document.getElementById("judge");
judge.onclick=judge_click;
function judge_click(e){
if(window.event) e=window.event;
if(e.target){       //能获取到target则用，不能则…
alert(e.target.innerHTML);
}
else{
alert(e.srcElement.innerHTML);
}
}
}

这样就成功实现了吗？不对，还是有问题。当我点击在div内的空白部分时，竟然会弹出这样的提示框！



原来target和srcElement的事件捕捉还包括父节点的，好家伙…于是我只好再写判断，获取子节点：

window.onload=function(){
var judge=document.getElementById("judge").childNodes;
for(i=0;i<judge.length;i++){
if(judge[i].nodeType==1){
judge[i].onclick=judge_click;
}
}
function judge_click(e){
if(window.event) e=window.event;
if(e.target){
alert(e.target.innerHTML);
}
else{
alert(e.srcElement.innerHTML);
}
}
}

嗯，这样就完美了，嘿嘿。
后来才知道原来还可以这样写：

window.onload=function(){
//var judge=document.getElementById("judge").childNodes;
// for(i=0;i<judge.length;i++){
//  if(judge[i].nodeType==1){
//      judge[i].onclick=judge_click;
//  }
// }
var judge=document.getElementById("judge");
var zjudge=judge.getElementsByTagName("*");
for(i=0;i<zjudge.length;i++)
zjudge[i].onclick=judge_click;

function judge_click(e){
if(window.event) e=window.event;
if(e.target){
alert(e.target.innerHTML);
}
else{
alert(e.srcElement.innerHTML);
}
}
}

最后的结果是一样的，后者好像更容易理解一些。

知识梳理：

e对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。（IE需要if(window.event) e=window.event来建立）

target事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。http://www.w3school.com.cn/htmldom/event_target.asp

IE不支持target属性，有自己“target”——srcElement。使用方法一样。

nodeType判断节点类型。
http://www.w3school.com.cn/htmldom/dom_nodes_info.asp

1为元素节点;

2为属性节点;

3为文本节点;

Demo下载：http://pan.baidu.com/share/link?shareid=126379&uk=3221702211