5.1.1 事件基础

1. 鼠标事件对象：MouseEvent

• 产生的位置：MouseEvent在绑定事件的时候，产生在绑定事件对应的那个函数中，并且可以将鼠标事件对象作为参数传递给别人；

var div1 = document.getElementById("div1");
div1.onclick = fn;
function fn(e){
    console.log(e);//MouseEvent对象
    foo(e);
}
function foo(w){
    console.log(w);//MouseEvent对象
}

2. 鼠标事件对象e的属性及方法 -> 处理兼容；

标准浏览器中，事件对象e存在于绑定的函数中；在IE6-8，这个事件对象在window.event属性上； 
-> 处理兼容：e = e || window.event;

1. 获取鼠标点击位置到可视窗口的距离：-> e不兼容；

   • e.clientX: 获取X轴坐标（水平距离的宽度，都是大于0）；

   • e.clientY: 获取Y轴坐标（垂直距离的高度，都是大于0）；

      div1.onclick = function (e) {  // e 在IE6-8不兼容，返回undefined；
           //1. 事件对象e 兼容处理；
           e = e || window.event;
           console.log(e.clientX); 
           console.log(e.clientY);
       }
     

2. 获取鼠标位置 相对于页面（body） 的距离：在没有滚动条的情况下，e.clientX/Y 和 e.pageX/Y返回的值是一样的；-> 不兼容 ； 
   1.标准浏览器：

   • e.pageX: 获取X轴坐标（水平距离的宽度，都是大于0）；-> 标准
   • e.pageY : 获取Y轴坐标（垂直距离的高度，都是大于0）；-> 标准

   2.IE6-8 浏览器：

   • e.pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft); -> IE6-8 ：鼠标点击的位置到可视窗口的宽度 + 滚动条卷去的宽度；

   • e.pageY=e.clientY + (document.documentElement.scrollTop || document.body.scrollTop); -> IE6-8 ：鼠标点击的位置到可视窗口的高度 + 滚动条卷去的高度；

      div1.onclick = function (e) {
           e = e || window.event;
          //2. e.pageX兼容处理；
           e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);  //鼠标点击的位置到可视窗口的宽度 + 滚动条卷去的宽度；
           e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop); //鼠标点击的位置到可视窗口的高度 + 滚动条卷去的高度；
           console.log(e.pageX); 
           console.log(e.pageY);
       }
     

3. 阻止默认行为：-> 不兼容；

   • e.preventDefault() -> 标准浏览器 （例：a标签的自动跳转）；-> 本身是一个函数；
   • e.returnValue = false; -> IE6-8 ；

   • return false; : 也能处理默认行为；

       var link = document.getElementById("link");
       link.onclick = function (e) {
           e = e || window.event;
           // 3. 处理阻止默认行为的兼容性问题
           e.preventDefault ? e.preventDefault() : e.returnValue = false;
           //return false;  //也能处理默认行为
       };
     

4. （重要）获取当前事件类型：

   • e.type : 返回字符串数据类型，且不加"on" -> “click” “mouseover” …

       div1.onclick = function (e) {
           e = e || window.event;
           //4.获取当前事件类型
           console.log(e.type);//"click"
       }
     

   事件冒泡：点击当前元素会触发 从当前元素到所有祖先元素 对应的事件，直到document为止；

5. 获取事件源：-> 不兼容

   • e.target: 获取事件源；-> 标准浏览器

   • e.srcElement: 获取事件源；-> IE6-8 -> DOM对象

       var div0 = document.getElementById("div0");
       div0.onclick = function (e) {
           e = e || window.event;
           //5. 处理 事件源 兼容性问题
           e.target = e.target || e.srcElement;
       };
     

6. 阻止事件传播（事件冒泡）：-> 不兼容

   • e.stopPropagation();：阻止事件传播； -> 标准

   • e.cancelBubble = true;：阻止事件传播； -> IE6-8

       var link = document.getElementById("link");
       link.onclick = function (e) {
           e = e || window.event;
          //6. 处理 阻止事件传播 兼容问题
           e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
       };
     

7. 获取 onmouseover时， 指针从哪来的元素，获取onmouseout时，从当前位置（鼠标刚刚移开）运动到哪的这个元素；-> 不兼容；

   • e.fromElement ；-> 标准

   • e.relatedTarget；-> IE6-8

        div1.onmouseover = function (e){
              e = e || window.event;
              var linkEle = e.fromElement || e.relatedTarget;
              console.log(linkEle);//div1
        };
     

5.2.1 键盘事件

1. 跟 表单 有关的事件 ：

• onfocus（获得焦点）；
• onblur（失去焦点）；
• oninput（输入时）；
• onkeyup（键盘键抬起）；
• onkeydown（键盘键按下）； 
  …

2. 键盘事件对象（KeyboardEvent）：

1. e.key ：按键的内容；
2. e.keyCode ：按键编码； 
   
   • Enter （回车） 13 ；
   • BackSpace（退回删除） : 8 ；
   • Space（空格） : 32 ；
   • left （向左键）: 37 ；
   • top（向上键） : 38 ；
   • right（向右键）: 39 ；
   • bottom （向下键）: 40 ；
   • 0 - 9 : 48 - 57 ；

<input type="text" id="input">

var input = document.getElementById("input");
input.onkeyup = function (e) {
    e = e || window.event; // e的兼容性处理；
    //console.log(e); // KeyboardEvent -> 键盘事件对象
    console.log(e.keyCode);
}