事件-事件对象详解

 /**   *  事件   *    - 鼠标事件   *         + 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);    // }
上一篇:事件传播机制-事件捕获-事件-冒泡-事件委托


下一篇:jq 拖拽