事件-事件对象详解

 /**

  *  事件

  *    - 鼠标事件

  *         + click 点击事件(pc) 单击事件(移动端,300ms延迟)

  *         + dbclick 双击事件

  *         + contextmenu 鼠标右键点击触发

  *         + mousedown   鼠标按下

  *         + mouseup     鼠标抬起

  *         + mousemove   鼠标移动

  *         + mouseover   鼠标滑入

  *         + mouseout    鼠标滑出

  *         + mouseenter  鼠标进入

  *         + mouseleave  鼠标移出

  *         + mousewheel  鼠标滚轮滚动

  *         + ...

  * 

  *    - 键盘事件

  *         + keydown 键盘按下

  *         + keyup 键盘抬起

  *         + keypress 长按(除了Shift/Fn/CapsLock键之外)

  *         + ... 

  * 

  *    - 手指事件

  *         [单手事件模型]

  *         + touchstart 手指按下

  *         + touchmove  手指移动

  *         + touchend   手指松开 

  *         [Gesture Event 多手指事件模型]

  * 

  *    - 表单事件

  *         + focus 获取焦点

  *         + blur 失去焦点

  *         + submit 表单提交

  *         + reset 表单重置

  *         + select 选中事件

  *         + change  内容改变

  *         + input 移动端经常使用，监听文本框中的内容随着输入的改变触发

  * 

  *    - 资源 事件

  *       + load  加载成功 (window.onload / img.onload)

  *       + error 加载失败

  *       + ...

  * 

  *    - css3 动画事件

  *        + transitonend   动画结束

  *        + transitonstart 动画开始

  *        + transitonrun   动画运行中

  *    

  *     - 视图事件

  *         + resize 浏览器改变大小

  *         + scroll 滚动条滚动

  *         + ...

  * 

  * 

  *   事件绑定

  *     - DOM 0级事件绑定

  *         语法: 元素.on[事件] = [函数]

  *         document.body.onclick = functon(){}

  * 

  *         移除绑定: 赋值为mull或者其它函数值既可

  *         document.body.onclick =null

  * 

  *          原理: 每一个dom元素对象的私有属性上都有很多类似于 'onxxx'的私有属性赋值

  *              + 只能给当前元素的某个事件行为绑定一个方法,多个会覆盖之前的

  * 

  * 

  *     - DOM 2级事件绑定

  *         语法 [元素].addEventListener([事件]),[方法],[捕获/冒泡]

  *        document.body.addEventListener('click',fn1,false);

  *    

  *      移除: [元素].removeEventListener([事件]),[方法],[捕获/冒泡]

*           document.body.removeEventListener('click',fn1,false);

         原理: 

           + DOM2级事件绑定，绑定的方法一般不是匿名函数

           + 能给当前元素的某个事件行为绑定多个方法

  * 

 */ 

  /**

  *  事件对象

  *     给当前元素的某个事件行为绑定方法，当前事件行为触发，不仅会把绑定的方法执行，

  *     并且还会给方法默认传递一个参数,而这个实参就是事件对象

  * 

  * 

  * 

  */

    

   let body = document.body;

   /**

    * 事件对象 

    *    + 鼠标事件对象 MouseEvent 

    *       + clientX/clientY 鼠标触发距离当前窗口的 X/Y轴坐标

    *       + pageX/pageY     鼠标触发距离BODY的 X/Y轴坐标

    *       + type   事件类型

    *       + target/srcElement  获取当前事件源

    *       + path  传播路径

    *       + ev.prevemtDefault() / ev.returnValue = false  阻止默认行为

    *       + ev.stopPropagation() / ev.cancelBubble = true 阻止冒泡传播

    *       + ...

   */

   // body.onclick = function(ev){

   //     console.log(ev);

   // }

   

   // let n = null;

   // body.addEventListener('click',function(ev){

      

   //     n = ev;

   //     console.log(ev,0);

   // })

   // body.addEventListener('click',function(ev){

   //     console.log(ev === n);   // true

   //     console.log(ev,1);

   // })

   /**

    *  键盘事件对象

    *  KeyboardEvent

    *      + key / code 存储按键名字

    *      + which / keyCode   获取当前按键的 键盘码

    *         + 方向键 "左 37  上 38  右  39 下 40 "

    *         + Space 32

    *         + BackSpace 8

    *         + Del 46

    *         +...

    *    + altKey    是否按下 alt 键(组合按键)

    *    + ctrlKey   是否按下 ctrl 键(组合按键)

    *    + shiftKey  是否按下 shift 键(组合按键)

   */

   // document.onkeydown = function(ev){

   //     console.log(ev);

   // }

   /**

    *  手指事件对象

    *   TouchEvent 

    *       + changedTouches / targetTouches / touches 都是用来记录手指信息,常用的是changedTouches

    *          + 手指按下 、移动 、 离开屏幕 changedTouches 都存储了对应的信息

    *            而 touches 在手指离开屏幕后，就没有任何的信息了

    *             => 获取的结果都是一个 TouchList 集合,记录每一根手指的信息

    *       + ev.changedTouches[0] 第一根手指的信息 

    *           + clientX / clientY     

    *           + pageX / pageY

    *   

    * 

   */ 

   // document.body.ontouchstart = function(ev){

   //     // console.log(ev);

   //     let point = ev.changedTouches[0];

   //     console.log(point);

   // }

   /**

    * Event 普通事件对象  

    *    

   */

   // window.onload = function(ev){

   //     console.log(ev);

   // }