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

接上次看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

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