【JavascriptDay17】事件传播、事件对象

事件传播 <div style="background-color: rgba(0, 0, 255, 0.5);">         <div style="background-color: rgba(255, 0, 0, 0.5);margin: 50px;">asdasd</div>     </div>     <!-- 事件传播，子元素被触发的事件，会基于标签结构向父元素传递，                  并让父元素也触发对应的事件      -->     <div class="box" onclick="fun1()">         <div class="box">             <div class="box">                 <div class="box" onclick="fun2()"></div>             </div>         </div>     </div>     <script>         function fun1(){             console.log(1);         }         function fun2(){             console.log(2);         }     </script>     <hr>     <!--          事件传播过程中的事件回调执行分为两种执行             1. 冒泡：由子元素向父元素顺序，依次触发事件                     默认事件回调的执行规则，元素的属性事件绑定只会触发冒泡规则             2. 捕获：由父元素向子元素顺序，依次触发事件                     元素只有通过 addEventListener("事件名",回调方法,true); 捕获绑定     -->     <div class="box" onclick="printName('div1')">div1         <div class="box" onclick="printName('div2')">div2             <div class="box" onclick="printName('div3')">div3                 <div class="box" onclick="printName('div4')">div4</div>             </div>         </div>     </div>     <script>         function printName(arg){             console.log(arg);         }     </script>     <hr>     <div class="box a">div1         <div class="box a">div2             <div class="box a">div3                 <div class="box a">div4</div>             </div>         </div>     </div>     <script>         var boxAList = document.querySelectorAll(".a");         for (let i = 0; i < boxAList.length; i++) {             boxAList[i].addEventListener("click",function(){                 console.log("div"+(i+1));                              },true)         }     </script>     <hr>     <!-- 当父子元素事件绑定时，同时存在捕获和冒泡。优先执行捕获 -->     <div class="box b">div0-捕获         <div class="box b">div1-冒泡             <div class="box b">div2-捕获                 <div class="box b">div3-冒泡</div>             </div>         </div>     </div>     <script>         var boxAList = document.querySelectorAll(".b");         for (let i = 0; i < boxAList.length; i++) {             boxAList[i].addEventListener("click",function(){                 console.log("div"+i);             },i%2==0);             // i%2==0 true 捕获             // i%2==0 false 冒泡         }     </script> 事件对象 <!--         事件对象参数：记录事件触发时对应的相关信息             + 标签属性方式完成事件绑定时，可以为方法提供一个全局关键字 event               event关键字用于指代当前方法触发时(瞬时参数)的相关信息对象     -->     <!-- abc 是JS的全局变量，如果abc不存在，会报 abc is not defined -->     <input type="button" value="点击(左键按下并松开)" onclick="printEventA('参数',abc,event)">     <input type="button" value="鼠标左键单击" onmousedown="printEventA('参数',abc,event)">     <script>         var abc = "全局变量";         function printEventA(arg,arg1,e){             console.log("click",arg,arg1);             console.log("事件对象:",e);             console.log("事件类型:",e.type );             console.log("事件触发对象:",e.target );             console.log("事件的绑定对象:",e.currentTarget);             console.log("鼠标事件对应指针坐标",e.x,e.y);         }     </script>     <hr>     <div class="box" onclick="printEventB(event,'outDiv')">         <!-- <div class="box" onclick="printEventB(event,'inDiv')"></div> -->         <div class="box"></div>     </div>     <script>         function printEventB(e,name){             // console.log(name,"==========>");             // console.log("target",e.target);             // console.log("currentTarget",e.currentTarget);             // console.log("<===========",name);             console.log(name);             // 只有元素自身被点击时才会触发下述功能的调用 => 绑定的事件功能只有元素自己可以触发             if( e.target===e.currentTarget ){                 console.log(name,"==========>");                 console.log("target",e.target);                 console.log("currentTarget",e.currentTarget);                 console.log("<===========",name);             }         }     </script>