事件对象/事件对象兼容性处理/事件对象常用属性和方法

事件对象

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

<script>
      var div = document.querySelector("div");
      div.onclick = function (event) {
        console.log(event);
      };
      div.addEventListener("click", function (event) {
        console.log(event);
      });

兼容性处理

    div.addEventListener("click", function (e) {
        e = e || window.event;
         console.log(e);
      });

事件对象常用属性和方法

事件对象属性方法	说明
e.target	返回触发事件对象 标准
e.srcElement	返回触发事件对象 非标准 ie6-8使用
e.type	返回事件类型 比如click mouseover 不带on
e.cancleBubble	该属性阻止冒泡 非标准 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为） 非标准 ie6-8使用 例如不让链接跳转
e.preventDefault()	该属性阻止默认事件（默认行为） 标准 例如不让链接跳转
e.stopPropagation()	阻止冒泡 标准

e.target 与 this 对比：

e.target 返回的是触发事件的对象（元素）

this返回的是绑定事件的对象（元素）

e.target点击了哪个元素，就返回哪个元素；

this哪个元素绑定了该事件就返回谁

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

e.srcElement 的 ie 兼容性处理 （了解）

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

preventDefault() 阻止事件默认行为

    //阻止事件默认行为  比如让链接不跳转
      var a = document.querySelector("a");
      a.addEventListener("click", function (e) {
        e.preventDefault();
      });

     //传统注册方式 阻止事件默认行为
      a.onclick = function () {
        //普通浏览器 e.preventDefault()方法
        e.preventDefault();
        //低版本浏览器 ie678 returnValue属性
        e.returnValue;
        //也可以利用 return false 来阻止默认行为 没有兼容性问题
        return false; //此方法虽然好 但return后面的代码将无法执行，而且仅限于传统注册行为
      };

阻止冒泡的两种方式 e.stopPropagation()（重要）

    var son = document.querySelector(".son");
      son.addEventListener(
        "click",
        function (e) {
          alert("son");
          e.stopPropagation(); //阻止冒泡 e.stopPropagation() 方法
          //低版本处理方式
          e.cancelBubble = true;
        },
        false
      );

阻止冒泡的处理兼容性问题

       function (e) {
       //阻止冒泡的处理兼容性问题：
          if (e && e.stopPropagation) {
            e.stopPropagation();
          } else {
            window.e.cancelBubble = true;
          }
        },