2.事件对象常用属性

上一篇：事件的理论基础

• 什么是事件？

  • 事件就是元素天生一个行为，只要操作元素就会触发相关行为

• 事件绑定： 给天生自带事件行为绑定方法，当事件触发，对应的方法执行

  • oBOx.onclick=functon(){console.log(单击);}

• 天生自带的事件：

  • [鼠标事件]

    • /*
              click:点击（pc端是点击，移动端是单击[移动端有300ms延迟]），鼠标抬起触发
              dbclick:双击
              mouseover:鼠标飘过
              mouseout:移出
               mouseenter:进入
              mouseleave：离开
              mousemove:移动
              mousedown:按下(鼠标的左右键按下都起作用[注意与click的区别])
              mouseup:抬起(优先于click抬起)
              mousewheel:鼠标滚轮滚动（注意与scroll[滚动条滚动]的区别）*/
      

  • [键盘事件]

    • /*
             keydown:按下
             keyup:抬起
             keypress：按下（和keydown类似，但是返回值不同，只不过keydown返回值是键盘码，keypress的返回值是ASCLL码值）
             由于手机端是虚拟键盘，以上不支持手机端 ，手机端可用input代替*/
      

  • [表单元素常用事件]

    • /*
              focus:获取焦点
              blur:失去焦点
              change:内容改变
              ……*/
      

  • [移动端手指事件]

    • /*[touchd:单手指]
          uchstart：手指按下
          touchmove:手指移动
          uchend:手指离开
          touchcancel:应为意外情况导致手指取消。
      
      [esture:多手指操作]
          gesturestart:多手指按下
          stureend:多手指离开
          gesturechange：手指改变*/
              
      /*[音视频AUDIO/VIDIO事件]
          canplay:可以播放（播放过程中可能出现由于资源没有加载完成，导致卡顿）
          nplaythrough:(资源加载完成，可以正常无障碍播放)
          ……*/
      /* [其他常用事件]
          load:加载事件
          upload:
          beforunload:
          scroll:滚动条滚动事件
          resize:大小改变事件
          window.onresize=function () {}:但浏览器的窗口大小发生改变会触发这个事件，执行对应的事情
      ……*/
      

• 事件绑定*

  • [DOM0级事件绑定]*

    • [element].om[事件]=function（）{}

  • [DOM2级事件绑定]*

    • [element].addEventLisenter('事件'，function（）{}，false)
    • [element].attachEvent('on+事件'，function（）{});[支持IE6~8]

  • 目的：给当前某个元素的某个事件绑定方法（不管是基于DOM0还是DOM2）,都是为了触发严肃的相关行为时候能做点儿事前（也就是把绑定的方法执行）；不仅把方法执行了,而且浏览器还给方法传递了一个实参信息值（这个值就是事件对象）

  • 事件对象：MouseEvent鼠标事件对象，KeyboardEvent键盘事件对象，Event普通时间对象

  • <div id="box" style="width: 300px;height: 300px;background: red"></div>
    <input type="text"id="ipt">
    
    box.onclick=function (e) {
            console.log(e)/*定义一个形参用来接收方法执行的时候浏览器传递的信息值（事件对象：MouseEvent鼠标事件对象，KeyboardEvent键盘事件对象，Event普通时间对象）
            事件对象中记录了许多属性值和属性名，这些信息包含了当前操作的基础信息。
            例如：鼠标点击位置的X|Y轴坐标，鼠标点击的是谁（事件源）等信息*/
            /*MouseEvent {isTrusted: true, screenX: 1576, screenY: 238, clientX: 168, clientY: 133, …}
            **/
        
            /* [MouseEvent :鼠标事件对象常用属性]
            *e.target:=>事件源（但前操作的元素）
            * e.clientX/e.clientY:当前鼠标出发点距离当前窗口左上角的X/Y轴的坐标
            * e.pageX/e.pageY:当前鼠标位置距离页面左边和东部的距离
            * e.preventDefault():组织默认行为
            * e.stopPropagation()组织冒泡
            * e.type:当前事件类型*/
        }
    
    
    
    
    ipt.onkeydown=function (e) {
            console.log(e)
            console.log(e.keyCode)
            //KeyboardEvent {isTrusted: true, key: "e", code: "KeyE", location: 0, ctrlKey: false, …}
            /*[keyboardevent：键盘事件]
              * e.code:当前按键码’keyE'
              * e.key:当前按键'e'
              * e.which/e.keyCode：当前按键码‘69’*/
    
            /*//=>常用的键盘码：
            *   左-上-右-下 ：37-38-39-40
            *   Backspance:8
            *   Enter:13
            *   Spance32
            *   Delete:46
            *   Shift:16
            *   Alt:18
            *   Ctrl:17
            *   F1~F12:112-113
            *   0~9：48~57
            *   a~z:65-90*/
        }