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

时间 2021-02-25

标签 javascript html html5 java 浏览器缓存 dom ide 函数性能栏目 JavaScript 繁體版

原文原文链接

接上次看JS的事件冒泡和捕获，因此顺带就把`事件`相关的知识都看无缺了

并且想到一个好的学习方法，第一天本身看，次日把前一天学习的东西写下来，一方面能够当复习，一方面当从新整理而且分享

事件对象

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

对于不一样浏览器环境，这个event事件对象有一些差距html

DOM中的事件对象

不论是DOM0级仍是DOM2级html5

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

经常使用的event对象的一些属性浏览器
- type：表示事件的类型缓存
  
  具体用法：能够经过type区分，在同一个事件处理函数实现多个事件的处理，减小事件监听，优化性能dom
- currentTarget：事件处理程序当前正在处理这个事件的元素ide
- 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
  。。。太多了，还有好多事件类型，回头再填坑了，记录不下去了

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

接上次看JS的事件冒泡和捕获，因此顺带就把事件相关的知识都看无缺了

并且想到一个好的学习方法，第一天本身看，次日把前一天学习的东西写下来，一方面能够当复习，一方面当从新整理而且分享

事件对象

DOM中的事件对象

IE中的事件对象

事件类型

UI事件

焦点事件

鼠标与滚轮事件

键盘与文本事件

复合事件

变更事件

HTML5事件

接上次看JS的事件冒泡和捕获，因此顺带就把`事件`相关的知识都看无缺了