Javascript稳稳稳扎记——事件对象

事件对象

  var div = document.querySelector('div');
        div.onclick = function(e) {
               console.log(e);
               console.log(window.event);
                e = e || window.event;
                console.log(e);
    }
            div.addEventListener('click', function(e) {
                  console.log(e);
       })

常见事件对象的属性和方法

1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
   2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
   3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
   4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
   5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event; 常见事件对象的属性和方法

1. e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素） 记忆技巧 ： e.target 点击了那个元素（‘e ‘ ’ .’ 谐音 易点他它），就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁

   var div = document.querySelector('div');
    div.addEventListener('click', function(e) {
        console.log(e.target);
        console.log(this);

    })
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
    // 我们给ul 绑定了事件  那么this 就指向ul  
        console.log(this);
        console.log(e.currentTarget);
  // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);
                 })

了解兼容性处理方法

  div.onclick = function(e) {
           e = e || window.event;
           var target = e.target || e.srcElement;
            console.log(target);

    }

了解 跟 this 有个非常相似的属性 currentTarget ie678不支持