Javascript中的事件对象和事件类型

时间:2020-12-02 14:35:15

接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了

而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享


事件对象

事件处理程序函数在处理事件时,或者说DOM在触发某个事件的时候,会产生一个包含事件相关信息的event事件对象

对于不同浏览器环境,这个event事件对象有一些差距

  • DOM中的事件对象

    不管是DOM0级还是DOM2

    兼容DOM的浏览器会将一个event对象传入事件处理程序中

    常用的event对象的一些属性

    • type:表示事件的类型

      具体用法:可以通过type区分,在同一个事件处理函数实现多个事件的处理,减少事件监听,优化性能

    • currentTarget:事件处理程序当前正在处理这个事件的元素

    • target: 表示实际触发事件的DOM元素,实际目标

      可以这么理解,body下面的div被点击,冒泡到body,在body上绑定了一个click事件,这个时候触发这个body的点击事件,但是这个时候的target实际上是div

      那么在事件处理程序中,还有一个this属性,还有一个currentTarget:永远指向正在处理这个事件的元素,那么上一个例子中实际上是body在处理这个事件,所以currentTarget是指向body

      而 事件处理程序中的this指向,是一直指向currentTarget表示正在执行和处理事件的这个元素

      所以,在事件没有冒泡的情况下,这三者是可以为同一个值,但是如果是在冒泡阶段事件被处理的话,则这个target可能不等于其他两个值

    • preventDefault 阻止默认行为,是一个函数

      用法:在需要阻止默认行为的事件处理函数中,使用event.preventDefault(),取消默认事件,比如默认点击a标签会跳转指定链接等等

      注意: 只有event.cancleable属性为true的事件类型,才可以使用preventDefault

    • stopPropagation 阻止事件冒泡和捕获,也是一个函数

      • 这个用的比较常见,阻止事件冒泡和捕获,只要这个事件被处理,不会顺着事件流往捕获方向或者冒泡方向传递
    • eventPhase 获取事件当前正处于事件流的哪个阶段

      • 事件流三个阶段: 捕获阶段,冒泡阶段,处于目标阶段
      • 事件处理程序中的event.eventPhase分别对应值:1,3,2
    • 上述event属性和方法,尽在事件处理程序执行期间存在,事件处理程序一旦执行完毕,会立即销毁

  • IE中的事件对象

    IE中的event对象跟DOM中的事件对象有一定的差别,最重要的就是IE中的事件对象,如果是使用DOM0级的方法添加事件处理程序是,event对象会挂载到window下面?window?window?是的没错,获取事件对象的时候,是通过window.event来拿到事件对象,如果使用html指定事件处理程序或者是DOM2级都都不会有这个问题,和DOM级别类似,会有一个event对象传入到事件处理程序

    但是IE中的事件对象,对应的属性名和方法名跟DOM中事件对象的名字有很大不一样

    • cancelBubble == stopPropagation 阻止事件冒泡,但是不是个方法是一个属性
    • returnValue == preventDefault 阻止默认事件,但是不是个方法,是一个属性
    • srcElement == target实际触发目标
    • type == type用来区分事件类型,这个没有区别

    要记住的还是,如果在IE环境下,使用DOM0级指定事件处理程序的话,获取event对象需要从window.event这样获取

    例如:

     var btn= document.getElementById('test')
    
     // DOM0级指定
    btn.onclick=function(){
    alert(window.event.target.srcElement === this) //true
    } // DOM2级
    btn.addEventListener('click',function(event){
    alert(event.srcElment === this) //true
    })

    还有就是IE环境下阻止事件冒泡和默认处理程序都是属性,不是方法,只需要把对应的属性设置为false

    例如:

        var link = document..getElementById('test')
    link.onclick = function(){
    window.event.returnValue = false; //阻止默认事件
    }

    IE中的cancleBuble只是取消冒泡,因为IE环境不支持事件捕获,哈哈哈哈

    然后就是完善一下之前的EventUtil,实现跨浏览器的获取事件对象,还有阻止冒泡和默认事件处理程序,代码如下

        getTarget(event){
    return event || window.event //IE环境下可能是WINDOW.event
    },
    preventDefault(event){
    if(event.preventDefault){
    event.preventDefault()
    }else{
    event.returnValue = false // IE环境下没有preventDefault,是通过设置returnValue取消默认
    }
    },
    stopPropagation(event){
    if(event.stopPropagation){
    event.stopPropagation()
    }else{
    event.cancelBuble = false
    }
    }

事件类型

DOM3级完善了事件类型,用来区分事件类型的不同信息,类似:鼠标事件,焦点事件,键盘事件,文本时间,滚轮事件等等

  • UI事件

    指的是那些不一定与用户操作有管的事件,包括一些DOM和元素的交互时间,例如load事件 unload事件

    • load事件

      • 最常用的事件,
      • 触发对象: window
      • 触发时间:页面完全加载后(包括所有图像,JS文件,CSS等外部资源)
      • 如何捕获:
        • DOM2级写法:监听window对象,例如window.addEventListener('load',function(){})
        • HTML级写法,由于HTML写法无法拿到window对象,所以会直接写在body上面,一般来说,在window上发生的任何事件都可以在body元素上通过对应的特性来指定,所有的浏览器都能很好地支持这种方式,但是任然推荐使用DOM0DOM2javascript的方法来绑定window对象的时间按处理程序
        • img,script,link,video等标签也有load事件
    • unload事件

      • 一般用来:在这个事件清除引用,清理内存
      • 触发对象:window
      • 触发时间:文档被完全卸载之后触发,此时可能一些对象和变量已经被卸载,注意引用关系
    • resize事件

      • 区别:在DOM浏览器和IE环境有区别,event.target属性的实际触发对象不一样,在DOM浏览器中,这个属性指向document,但是在IE环境中,这个值没有指定
      • 兼容性:在firefox浏览器,resize的过程不会持续触发这个事件,只在开始和结束,两个触发,而在其他浏览器,在拖拽的过程中是会一直触发这个事件
      • 触发对象:window
      • 触发事件:窗口大小发生1px的改变时候,最大最小化窗口的时候
      • 如何捕获:参考load事件,可以用window对象捕获,也可以用body标签捕获
    • scroll事件

      • 触发对象:window
      • 捕获方式: 和load方法类似
      • 注意:根据document.compatMode渲染模式,有不同的表现,在compatMode==='CSS1Copat'标准模式时,除了Safari浏览器,所有的都会通过html这个元素反应这个变化,而在混杂模式时,是通过body元素的scrollLeftscrollTop来获取这个具体的bian'hua数值,而现在基本上混杂模式和标准模式已经混合了,区分没有这么详细
  • 焦点事件

    在页面元素失去或者获得焦点的时候触发,可以用来知晓用户在页面上的行踪

    主要用的比较多的是

    focus,blur,这两个事件表示,元素获得焦点和失去焦点,不会冒泡

    focusin,focusout用来表示焦点进入和焦点失去事件,**这两个事件会冒泡

    虽然上述常用事件有的不会冒泡什么,但是,仍然会走捕获阶段,所以仍然可以通过捕获阶段进行一些外级操作,当然是浏览器支持捕获阶段

    触发元素:所有元素都可触发

    捕获方式:DOM0级,DOM2级,或者HTML方法均可捕获,IE浏览器环境方式也可以

  • 鼠标与滚轮事件

    鼠标和滚轮事件也是在DOM3级事件中定义的,主要有,单击,点击,双击,鼠标移入,鼠标移出,等

    除了鼠标移入mouseenter和鼠标移除mouseleave所有的鼠标事件都会冒泡,也是可以取消的,而取消鼠标事件将会影响浏览器的默认行为,取消鼠标事件的默认行为还会影响其他事件,因为鼠标事件可能和其他事件是有联系的

    一个click事件,前面包括了一个鼠标按下mousedown和鼠标放开两个事件mouseup,也就是触发click事件前会先触发前两个事件

    同理,双击事件doubleclick事件包括两个click事件,前面又有两个mouseupmousedown事件

    主要用处

    • 客户区坐标位置
      • event.clientXevent.clientY
      • 鼠标事件,相对于浏览器视口的位置
    • 页面坐标位置
      • event.pageXevent.pageY
      • 鼠标事件,相对于页面的位置
      • IE8及更早版本不支持这两个属性,但是也可以通过鼠标相对于视口位置+页面滚动属性算出=鼠标相对于页面的位置
    • 屏幕坐标位置
      • event.screenXevent.screenY
      • 鼠标事件,相对于整个屏幕的位置
    • 修改键/点击鼠标时同时按下了多功能键(ctrl,alt等)
      • 对应的键,直接在点击事件的对应属性上面
      • 例如:shift键 就在 event.shiftKey这个属性上
    • 相关元素
      • 鼠标移入移出的来源元素和目标元素
      • 获取方式: event.relatedTarget
      • 分别在mouseoutmouseenter时表示 目标获取光标元素和目标失去光标元素
      • IE8之前的没有这个属性,但是分别有两个fromElmenttoElement用来获取这两个相关元素
    • 鼠标按钮
      • 鼠标事件(例如点击事件时,点击的是哪个按钮,左键,中键,右键等)
      • 属性名:button
      • 属性含义:0 : 左键按下,1:中键按下,2:右键按下
      • IE8及更早版本浏览器也有这个属性,但是对应值有比较大的区别,区分的更为细致
    • 更多事件信息
      • 属性名: detail
      • 表示鼠标点击次数
    • 鼠标滚轮事件
      • 我真是没想到支持的这么详细,hhh
    • 触摸设备
      • 这个还和后面的触摸事件有一定的区别
      • 这个表示鼠标事件在一些移动设备中的区别表现
      • 例如:
      • 在移动设备中不支持dblclick事件,双击会放大画面,而且不能改变该行为
      • 轻击可点击单元会触发mousemove事件,如果此事件会导致内容变化,将不再发生其他事件,如果不会触发任何事件,那么依次会发生mousedown,mouseup,click事件,可点击单元表示一些会产生默认操作的元素:比如a标签
    • 无障碍性问题
      • 鼠标设备事件需要针对无障碍性考虑更多易用性和点击操作逻辑
  • 键盘与文本事件

    主要是一些键盘输入和文本键入的事件,是说DOM2级事件最初规定了键盘事件,但是后来删掉了,所以目前主要支持的还是DOM0级事件和DOM3级事件,但是DOM3级事件暂时没有特别完善

    主要事件keydown,keypress,keyup,理论上所有的元素都支持这三个事件,但是实际上只有文本输入框支持最多

    触发顺序keydown,keypress,keyup,并且keydownkeypress都是在文本框发生变化之前触发,而keyup事件则是在文本框已经变化之后触发,如果用户一直按住一个字符不放,则会一直触发keydownkeypress事件

    还有一个新增的文本事件textInput,实际上是对keypress的补充,用意是将文本显示给用户之前更加容易拦截文本,在文本插入文本框之前会触发textInput事件

    常用键盘事件属性

    • 键码keyCode
      • 触发时间:keydownkeyup时,event对象会有一个keyCode属性
      • 表示:按下按键的对应的小写字母或数字对应的ASCII码相同
    • 字符编码charCode
      • 触发时间:keypress事件触发时
      • 使用方式: 首先检查charCode是否可用,如果有的话则表示的是 按下键对应字符的ASCII码,而IE8及更早版本,则是在keyCode表示字符对应的ASCII码
      • 所以:字符对应的ASCII码不一定在charCode,在IE8及老旧浏览器也可能在keyCode
      • 用法:如果charCode可用的话,可以通过字符串类方法String.fromCharCode转化为实际的字符
    • DOM3级新增了 charkey
      • 同时整合了charCodekeyCode
      • key:表示对应的文本字符,包括大小写,就是实际的键入字符
      • char:表现形式在按下字符时表现和key一致,但是对于非字符时,charnull
      • 新增了location属性,表示按下了键盘什么位置的同一个按键,例如键盘左边的shift和右边的shift
    • textInput事件
      • 新增的文本输入事件,只在可编辑区域触发,主要用域监听文本的变化,新增data属性,表示修改实际文本
      • 新增属性: inputMethod,用来区分输入方式,是复制进来的,还是拖放进来的,还是手写输入,语音输入等

    DOM3级的键盘输入事件很美好,但是不知道实际支持情况,而且还要做兼容,之前遇到一个number类型的input输入框,就累个够呛,候选字等,输入法越做越优秀,事件越来越复杂

    • 设备中的其他按键事件
      • 例如一些手柄的事件,加号,减号等,暂时没用到
  • 复合事件

    DOM3级新增的一类事件,用域处理IME的输入序列,暂时没接触,也是一类多功能输入事件吧

  • 变动事件

    DOM2级的变动事件

    表示:DOM中某一部分发生变化时给出提示,变动事件是为XML或者HTML DOM设计的,并不特定于某种语言。

    主要有:

    • 节点移除
    • 节点插入
    • 删除节点等
  • HTML5事件

    • contextmenu上下文菜单事件

      • 意义:通过鼠标右键,调出上下文菜单,鼠标右键显示事件
      • 触发元素:所有元素,
      • 是否冒泡:会冒泡
      • 注意:首先需要阻止默认事件处理程序,然后重新写事件处理程序,有可能影响浏览器默认行文
    • beforeunload事件

      • 意义:页面卸载之前用来挽留页面
      • 触发元素: window对象
    • DOMContentLoaded事件

      • 意义:DOM树完整形成之后触发
      • 触发元素: window对象
    • readystatechange事件

      • 意义:元素加载状态发生变化时
      • 触发元素:部分媒体元素,script标签等
      • 每个对象都有一个readystate的状态属性,会有以下状态(但不是所有状态都会正常变化)
        • uninitialized未初始化状态
        • loading正在加载
        • loaded加载完毕
        • interactive可以操作对象
        • complete完成
      • 但是不是所有对象都有这些完整的阶段,可能会跳过
    • pagehidepageshow事件

      • 意义:从内存中取出/进入视野时触发,不会触发load事件,不会重新加载页面,只是从页面回显
      • 一般发生在:前进/后退按钮点击的时候
      • 相关属性event.persisted是否被缓存在bfcache
      • 触发元素:window

      。。。太多了,还有好多事件类型,回头再填坑了,记录不下去了