js事件

作者: 言大大freedom | 来源:发表于2016-12-30 18:40 被阅读0次

js和HTML之间交互是通过事件实现的。事件会有事件流。事件描述的是从页面接受事件的顺序。IE和网景提出了差不多相反的事件流概念。IE提出事件冒泡流。网景提出事件捕获流。

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较不具体的节点。所有现代浏览器几乎都支持冒泡。

事件捕获：不具体的节点更早的接收事件，最具提的节点最后接收到事件。IE9以上可以支持捕获。

DOM2级规定的事件流包括三个阶段（IE8及更早版本不支持事件流）：

事件捕获阶段
处于目标阶段
事件冒泡阶段。

事件处理程序：

HTML事件处理程序
DOM0级事件处理程序
DOM2级事件处理程序

HTML事件处理程序

   <input type='button'  id='btn' onclick=clickMe() value='click me'>
    function clickMe (){
      alert('hi')
    } //这种处理程序代码耦合度太高，修改时需要修改两处。存在时差问题，有些事件可能需要HTML元素一出现在页面上就触发，但当时的事件处理程序可能尚不具备条件。

DOM0级事件处理程序：

  var btn =document.getElementById('btn')
  btn.onclick = function () {//每个事件只支持一个事件处理程序
      alert('hi')
  }
  btn.onclick = null //删除事件处理程序

DOM2级事件处理程序：IE9及以上支持

使用DOM2级事件处理程序的好处是可以为一个元素绑定多个事件处理程序

var btn =document.getElementById('btn')
btn.addEventListener('click',function(){
    alert('hi')
},false) //click事件在冒泡阶段触发

IE事件处理程序：IE8及以下只支持事件冒泡

var btn =document.getElementById('btn')
btn.attachEvent('onclick',funtion(){ //第一个参数为onclick，并不是click。
    alert('hi')  //attachEvent()添加的事件处理程序都会被添加到冒泡阶段
})

在IE中使用attachEvent()与使用DOM0级方法的主要区别：事件处理程序运行的作用域不一样。DOM0级事件处理程序会在其所属元素的作用域下运行，而attachEvent()的事件处理程序会在全局作用域运行。attachEvent()也可以为一个元素添加多个事件处理程序，执行顺序与DOM2级事件处理程序的执行顺序相反。

跨浏览器事件处理程序

var EventUtil = {
  addEvent:function (element,type,handler) {
      if (element.addEventListener) { //ie9及以上
          element.addEventListener(type,handler, false)
      } else if (element.attachEvent) { //ie8及以下
          element.attachEvent('on'+type,handler)
      } else {
          element['on'+type] = handler
      }
  },
  removeEvent:function(element, type,handler) {
      if (element.removeEventListener) {//ie9及以上
          element.removeEventListener(type,handler, false)
      } else if (element.detachEvent) { //ie8及以下
          element.detachEvent('on'+type,handler)
      } else {
          element['on'+type] = null
      }
  }
}
<input type='button'  id='btn'  value='click me'>
var btn =document.getElementById('btn')
var handler = function () {
    alert('hi')
}
EventUtil.addEvent(btn,'click',handler)

EventUtil.removeEvent(btn,'click',handler)

事件对象

在触发DOM上的某个事件时，会产生事件对象event。这个对象包含与这个事件有关的信息。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中，无论是DOM0级还是DOM2级。

var btn = document.getElementByid('btn')
btn.onclick = function (event) {
    alert(event.type) //click
}
btn.addEventListener('click',function (event) {
    alert(event.type) //click
}, false)

cancelable 表示是否可以取消事件的默认行为
preventDefault() 阻止默认操作 cancelable属性需要设置为true
bubbles 表示事件是否冒泡
stopPropagation() 取消事件的捕获或冒泡。如果bubbles为true
event.target 时间的目标
event.type 事件类型
event.currentTarget 正在处理事件的元素
event.eventPhase 确定事件当前正处于事件流的那个阶段 1表示捕获阶段 2 处于目标对象上 3 冒泡阶段

只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完成，event对象就会被销毁

IE中的事件对象

要访问IE中的event对象有几种不同的方式，取决于事件处理程序的方法。DOM0级事件处理程序，event对象作为window属性存在。
使用attachEvent()的情况下，可以使用event对象，也可以通过window 对象来访问event对象

cancelBubble 默认值是false，设置为true可以取消冒泡与stoppropagation()作用相同
returnValue 默认是false，设置为true表示取消事件默认行为与* preventDefault()作用相同
srcElement 事件的目标与target属性相同
type 事件类型

btn.onclick = function () {
    alert (window.event.srcElement === this)  //true
}
btn.attachEvent('onclick', function (event) {
    alert(event.srcElement === this) //false
})

跨浏览器事件对象

var EventUtil = {
  addEvent:function (element,type,handler) {
      if (element.addEventListener) {
          element.addEventListener(type,handler, false)
      } else if (element.attachEvent) {
        element.attachEvent('on'+type,handler)
      } else {
          element['on'+type] = handler
      }
  },
  removeEvent:function(element, type,handler) {
      if (element.removeEventListener) {
          element.removeEventListener(type,handler, false)
      } else if (element.detachEvent) {
          element.detachEvent('on'+type,handler)
      } else {
          element['on'+type] = null
      }
  },
  getEvent: function (event) {
    return event ? event : window.event
  } ,
  getTarget: function (event) {
    return event.target || event.srcElement
  },
  preventDefault: function (event) {
      if (event.preventDefault) {
          event.preventDefault ()
      } else {
          event.returnValue = false
      }
  },
  stopPropagation: function (event) {
      if (event.stopPropagation) {
          event.stopPropagation ()
      } else {
          event.cancelBubble = true
      }
  }
}
btn.onclick = function (event) {
    event = EventUtil.getEvent (event)
    var target = EventUtil.getTarget (event)
    EventUtil.preventDefault()
    EventUtil.stopPropagation()
}

事件类型

UI事件（用户与页面上的元素交互时触发）/ 焦点事件／鼠标事件／滚动事件／键盘事件／文本事件／变动事件／合成事件

UI事件指的是那些不一定与用户操作有关的事件。

load事件页面完全加载后window上触发
unload事件页面完全卸载后window上触发，只要用户从一个页面切换到另一个页面就会触发
abort事件用户停止下载过程时，如果嵌入的内容没有加载完<object>上触发
error事件当js发生错误时触发当无法加载图片时在img上触发当无法加载嵌入的内容时在<object>上触发
select事件当用户选中文本框中的一个或多个字符时触发
resize事件当窗口或框架的大小变化时在window或框架上触发
scroll事件当用户滚动带滚动条的元素中的内容时在该元素上触发
load事件中：图片img可以实现预加载，新图像元素不一样要等到添加到文档后才开始加载，只要设置了它的src属性就会开始下载。而<script>标签也支持load事件，只不过只有设置了<script>标签的src属性并且添加到文档后，才会开始下载js文件。

焦点事件

blur focus主要的两个事件，可以在捕获阶段侦听到它们但是它们不支持冒泡。focusin和focusout与blur focus等价，但是支持冒泡。

鼠标事件

click:用户单击主鼠标或者按下回车键时触发。
dblclick:用户双击主鼠标时出大。属于DOM3级事件标准
mouseover:当鼠标指针位于一个元素外部，用户将其首次移入另一个元素边界访问时触发，不能通过键盘触发这个事件
mouseout:当鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。不能通过键盘触发这个事件
mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件
mouseup:当用户释放鼠标按钮时触发，不能通过键盘触发这个事件
mousemove:当鼠标在元素内部移动时重复触发，不能通过键盘触发这个事件
mouseenter:在鼠标光标从外部首次移动到元素范围内触发，不支持冒泡，在光标移动到后代元素上不会触发。属于DOM3级事件标准。
mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发，不支持冒泡，在光标移动到后代元素上不会触发。属于DOM3级事件标准。

鼠标事件都是在浏览器视口的特定位置上发生的。这个位置信息保存在事件对象的clientX，clientY属性中。它们的值表示事件发生时鼠标指针在视口的水平和垂直坐标。这些值不包含页面滚动的距离，因此这个位置不表示鼠标在页面上的实际位置。

pageX,pageY这两个属性可以告诉你鼠标是在页面的什么位置发生的。这两个属性表示鼠标在页面上的位置，因此坐标时相当于页面本身而非视口的左边和顶边计算的。在没有滚动的状况下，pageX pageY 和clientX clientY的值相等。
pageX =clientX + scrollLeft
pageY= clientY + scrollTop
screenX和screenY 相对于整个电脑屏幕的位置
offsetX offsetY:表示鼠标相对于目标元素边界的坐标（仅IE支持）

滚轮事件

mousewheel:这个事件可以在任何元素上触发。当用户通过鼠标滚轮与页面上交互，在垂直方向上滚动页面时就会触发。特有属性wheelDelta 。当用户向上滚动时wheelDelta是120的倍数，当用户向下滚动时wheelDelta是-120的倍数。通过wheelDelta的正负号就可以知道鼠标滚轮的滚动方向。

触摸设备

在面向iPhone和iPod中的Safari开发时需要注意：
1.不支持dblclick，双击浏览器窗口会放大画面
2.两个手指放在屏幕上且页面随着手指的移动而滚动时，会触发mouseWheel和scroll事件
3.mousemove事件也会触发mouseover和mouseout事件

键盘事件

keydown 当用户按下键盘上任意键的时候触发，如果按住不放，会重复触发
keypress 当用户按下键盘上字符键的时候触发，如果按住不放，会重复触发
keyup 当用户释放键盘上的键的时候触发
在发生keydown和keyup事件时，event对象的keyCode会包含一个代码。event.keyCode
keyCode:按下键的字符编码

文本事件

textInput事件：主要是对keypress事件补充。用意是将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。包含data属性，保存用户输入输入的字符。

HTML5事件

contextmenu
beforeunload
DOMContentLoaded