事件对象1 · JavaScript

## 点击蓝色块 ``` <style> #box1 { width: 300px; height: 300px; background-color: pink; } #box2 { width: 200px; height: 200px; background-color: black; } #box3 { width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <input type="button" value="按钮" id="btn"> <div id="box1"> <div id="box2"> <div id="box3"> </div> </div> </div> <script> var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); var box3 = document.getElementById('box3'); var arr = [box1, box2, box3]; for (let i = 0; i < arr.length; i++) { var box = arr[i]; box.onclick = function (e) { //系统调用的,系统传入e e = e || window.event; console.log(e.eventPhase); //事件阶段 var target = e.target || e.srcElement; console.log(target); //获取真正触发事件的对象 console.log(e.currentTarget);//和this一样,获取事件处理函数所属的对象 console.log(this); } } </script> ``` ![](https://box.kancloud.cn/6bb990c3661d71e4528cbdf00579ecc8_994x1520.png)