事件传播
<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>
