2.事件对象常用属性

2019-10-26 本文已影响0人追马的时间种草

什么是事件？
- 事件就是元素天生一个行为，只要操作元素就会触发相关行为
事件绑定：给天生自带事件行为绑定方法，当事件触发，对应的方法执行
- 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*/
    }

2.事件对象常用属性

猜你喜欢

热点阅读