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);
        }
    }
}

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

知识梳理：

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

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

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

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

   • 1为元素节点;

   • 2为属性节点;

   • 3为文本节点;

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