十三章 事件

事件流

• 捕获阶段
  • 由网景公司提出，处IE其他浏览器兼容
  • 事件由document发起，最终到目标元素
  • document --> html -->body --> 目标元素
• 目标阶段
  • 事件触发至目标元素后触发
• 冒泡阶段
  • 由IE提出，所有浏览器都支持事件冒泡
  • 由目标阶段向document触发
  • 目标元素 --> body --> html --> document

事件处理程序

• DOM0级事件处理程序
  • dom.onclick= function(){ alert( 'dom0级事件处理程序' ) }
  • 等等
• DOM2级事件处理程序
  • DOM2级增加两个方法
  • dom.addEventListener() 事件监听方法
  • dom.removeEventListener() 取消监听方法
  • 两个方法都接收两个参数
    • 参数一事件名称
    • 参数二事件处理程序
    • *注意 在取消监听事件时 如果第二个参数传入匿名函数将无法取消。
    • IE事件监听方法名有所不同
    • dom.attachEvent() & dom.detachEvent()
      • 该方法事件处理程序中得作用域指向全局作用域
      • 相同dom元素添加多个事件时，已最新的开始执行

        dom.attachEvent('onclick',function(){
          alert(2)
        })
        dom.attachEvent('onclick',function(){
          alert(1)
        })
      

事件对象

• 兼容DOM得浏览器会将一个event对象传入到事件处理程序中。DOM0/DOM2
• 事件对象中得属性
  bubbles: 表示事件是否冒泡。
  cancelable: 表示是否取消默认行为。
  currentTarget: 当前元素。
  defaultPrevented: 值为true 表示调用了preventDefautl()取消默认行为。
  detail: 事件相关详细信息。
  eventPhase: 事件阶段 1.捕获 2.目标 3.冒泡。
  preventDefautl(): 取消默认行为 cancelable为true则可以使用这个方法 。
  stopPropagation(): 阻断事件流 bubbles为true则可以使用这个方法。
  target: 事件目标。
  trusted: true表示浏览器生成false 则表示开发人员创建。
  type: 事件类型。
  view: 与时间关联得抽象视图。

事件类型

• UI事件
  load: 所有元素加载完成。
  unload:页面完全卸载。
  abort:当用户停止下载，没有加载完成时。
  error: 发生错误,在window上触发。
  select:用户选择文本框。
  resize:窗口大小变化。
  scroll:带有滚动条的元素，滚动条发生滚动时触发。
  能力检测: document.implementation.hasFeature('UIEvent','3.0')
• 焦点事件
  blur/focus: 获得/失去焦点触发。
  focusIn/focusOut:获得/失去焦点触发。
  DOMfocusIn/DOMfousOut:只有Opera支持获取/失去焦点触发。
• 鼠标事件
  click/dblclick:单双击触发。
  mousedown/mouseup:按下/释放鼠标按键触发。
  mouseenter/mouseover:移入移出。
  mousemove:鼠标在元素内移动重复触发。
  dblclick事件触发流程: mousedown-->mouseup-->click-->mousedown-->mouseup-->click-->dblclick
IE8及之前版本: mousedown-->mouseup-->click-->mouseup-->dblclick
• 滚轮事件
• 文本事件/键盘事件
  keydown/keyup: 按下键盘任意键触发。
  keypress:按下字符键触发Esc也会触发。
  textInput:用户在可编辑区域输入字符时触发DOM3新增。
  • textInput的事件对象中包含inputMethod属性可以判断已哪种方式将文字输。入至文本框 page.383。
• 复合事件
  • DOM3新增事件 处理IME输入序列Input Method Editor(富文本)。
    compositionstart/compositionend:富文本打开/关闭时触发。
    compositionupdate:在向输入字段中插入新字符时触发。
• 变动事件
  DOM2级变动事件，在DOM发生改变时触发。
  DOMSubtreeModified: DOM结构发生改变时触发，任何变动事件都会触发该事件。
  DOMNodeInserted/DOMNodeRemoved:插入删除时触发。
  DOMNodeInsertedIntoDocument/DOMNodeRemovedFromDocument:直接插入/删除文档中得元素触发,此事件触发在DOMNodeInserted/DOMNodeRemoved之后触发。
• H5事件
  contextmenu:上下文菜单，表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
  beforeunload:页面完全卸载前触发。
  DOMContentLoaded:在形成完整DOM树之后触发。
  pageshow/pagehiden: firefox或Oprea有一个特性，名叫往返缓存(back-forward cache,或bfcache),在用户点击前进/后退按钮时加快页面转换速度，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态，实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，再次打开页面不会触发load事件。pageshow会在load事件触发后触发。pagehide会在unload事件之前触发。
  hashchange: url参数列表#后面发生改变时触发。H5新增
readystatechange: 文档或元素加载状态有关信息,行为难以预料。
  • uninitialized:对象存在尚未初始化。
  • loading:对象正在加载数据。
  • loaded:对象加载数据完成。
  • insteractive:可以操作对象了，但还没有完全加载数据。
  • complete:对象已经加载完成。

内存性能

• 在页面中添加含有事件的元素过多，可能会出现性能问题。可以使用事件委托，利用事件冒泡将事件监听尽可能绑定在外层容器，然后通过type,target等属性确定目标全素进行处理。好处是减少了事件监听程序的数量。

模拟事件

• 模拟事件，在DOM元素上，绑定模拟事件，可以模拟触发指定事件，比如我在单击某个元素的时候可以触发双击/移出/移入等事件。page.405