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

前端 专栏收录该内容
38 篇文章 1 订阅

冒泡和捕获

 <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>
  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值