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

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

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;
          }
        },