JS 基础篇(冒泡，捕获，事件委托)

冒泡和捕获

 <div id="wrapDiv">wrapDiv
     <p id="innerP">innerP
         <span id="textSpan">textSpan</span>
     </p>
 </div>

 <script>
 var wrapDiv = document.getElementById("wrapDiv");
 var innerP = document.getElementById("innerP");
 var textSpan = document.getElementById("textSpan");

 //绑定监听事件
 // function addEventHandler(target,type,fn,kind){
 //     var kindO = kind ? kind :false; //默认是冒泡
 //     if(target.addEventListener){
 //         target.addEventListener(type,fn,kindO);
 //     }else{
 //         // ie8以下
 //         target.attachEvent("on"+type,fn);
 //     }
 // }

 // addEventHandler(window,'click',function(e){
 //     console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
 // }, true)

 window.addEventListener("click", function(e){
     console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 document.addEventListener("click", function(e){
     console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 document.documentElement.addEventListener("click", function(e){
     console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 document.body.addEventListener("click", function(e){
     console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 wrapDiv.addEventListener("click", function(e){
     console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 innerP.addEventListener("click", function(e){
     console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 textSpan.addEventListener("click", function(e){
     console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
 }, true);


 // // 冒泡阶段绑定的事件
 window.addEventListener("click", function(e){
     console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 document.addEventListener("click", function(e){
     console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 document.documentElement.addEventListener("click", function(e){
     console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 document.body.addEventListener("click", function(e){
     console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 wrapDiv.addEventListener("click", function(e){
     console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 innerP.addEventListener("click", function(e){
     console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 textSpan.addEventListener("click", function(e){
     e.stopPropagation();
     console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

事件

<div class="pop-window" id="popWindow"></div>
  <input type="button" value="click me" id="noe">
<script>
  var noe= document.getElementById("noe");
  var popWindow = document.getElementById('popWindow');
    window.addEventListener('click',function(event){
        var target = event.target;
        popWindow.style.display='none';
        if(target == noe){
            popWindow.style.display='block';
         }
    });
</script>