九门宁生

导航

事件对象1 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: red;
    }

    #box2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }

    #box3 {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </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 array = [box1, box2, box3];
    for (var i = 0; i < array.length; i++) {
      var box = array[i];
      box.onclick = function (e) {
        e = e || window.event;
        // 事件的阶段
        console.log(e.eventPhase);
        // e.target 获取真正触发事件的对象
        var target = e.target || e.srcElement;
        console.log(target);
        // e.curentTarget   和this一样 获取事件处理函数所属的对象
        console.log(e.currentTarget);
        console.log(this);
      }
    }

     
    
    // var btn = document.getElementById('btn');
    // btn.onclick = function (e) {
    //   // DOM标准中，是给事件处理函数一个参数
    //   // e就是事件对象
    //   // 在老版本的IE中获取事件对象的方式  window.event
    //   // 
    //   // 处理事件对象的浏览器兼容性
    //   e = e || window.event;

    //   // 事件的阶段：1  捕获阶段   2  目标阶段  3 冒泡阶段    了解
    //   // console.log(e.eventPhase);
      
    //   // e.target  获取真正触发事件的对象  浏览器兼容问题
    //   // 在老版本的IE中  srcElement
    //   // 处理兼容性问题
    //   var target = e.target || e.srcElement;
    //   console.log(e.target);

    //   // 
    //   // e.currentTarget  事件处理函数所属的对象this
    //   console.log(e.currentTarget);
    // }
  </script>
</body>
</html>

 

posted on 2019-08-27 09:37  九门宁生  阅读(122)  评论(0)    收藏  举报