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元素上通过对应的特性来指定,所有的浏览器都能很好地支持这种方式，但是任然推荐使用DOM0或DOM2等javascript的方法来绑定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元素的scrollLeft和scrollTop来获取这个具体的bian'hua数值，而现在基本上混杂模式和标准模式已经混合了，区分没有这么详细

  • 焦点事件

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

    主要用的比较多的是

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

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

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

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

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

  • 鼠标与滚轮事件

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

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

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

    同理，双击事件doubleclick事件包括两个click事件，前面又有两个mouseup和mousedown事件

    主要用处

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

  • 键盘与文本事件

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

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

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

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

    常用键盘事件属性

    • 键码keyCode
      • 触发时间：keydown和keyup时，event对象会有一个keyCode属性
      • 表示：按下按键的对应的小写字母或数字对应的ASCII码相同
    • 字符编码charCode
      • 触发时间：keypress事件触发时
      • 使用方式: 首先检查charCode是否可用，如果有的话则表示的是 按下键对应字符的ASCII码，而IE8及更早版本，则是在keyCode表示字符对应的ASCII码
      • 所以：字符对应的ASCII码不一定在charCode，在IE8及老旧浏览器也可能在keyCode
      • 用法：如果charCode可用的话，可以通过字符串类方法String.fromCharCode转化为实际的字符
    • DOM3级新增了 char和key
      • 同时整合了charCode和keyCode
      • key:表示对应的文本字符，包括大小写，就是实际的键入字符
      • char：表现形式在按下字符时表现和key一致，但是对于非字符时，char为null
      • 新增了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完成
      • 但是不是所有对象都有这些完整的阶段，可能会跳过

    • pagehide和pageshow事件

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

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

相关文章