Ext事件机制学习

Ext事件机制

ext事件 分 元素事件 和 组件事件两个部分。元素事件是在浏览器事件的基础上宽展而来，组件事件采用观察模式实现。

我看过源码之后，觉得可能是版本太老的原因并不是很简洁，阅读起来真的很困难!

浏览器事件机制

简单总结一下浏览器原来的事件机制

DOM0 事件

DOM0 所有浏览器都支持，只能注册一函数
element.onclick =function(){}

DOM2 事件

只考虑非IE DOM2 的事件分是3个阶段
1. 事件捕获阶段 –自上而下
2. 目标阶段
3. 事件冒泡阶段 –自下而上

element.addEventListener(event, function, useCapture)

• event：事件名
• function : 注册函数
• useCapture :
  
  • true - 事件句柄在捕获阶段执行
  • false : 默认值，事件句柄在

Ext 元素事件

Ext.lib.Event 对象

这个类存在于\src\adapter\core\ext-base-event.js 。是一个对原生浏览器事件对象的适配器。简单封装了一些浏览器的兼容性适配
主要方法：

• addListener (el, eventName, fn)
• removeListener (el, eventName, fn)
• getRelatedTarget (ev)
• getXY(ev)
• stopPropagation(ev)
• preventDefault(ev)

Ext.EventObject 对象

像Ext.Element 包装了原生的DOM节点一样，Ext.EventObject包装了浏览器原生的事件对象，格式化了不同 浏览器之间的差异：例如鼠标的哪个按键被点击、键盘按键、停止随同方法一起的事件冒泡机制， 用来阻止发生浏览器默认操作。

主要函数

• setEvent(e) –封装原始对象为Ext.EventObject 对象
• getCharCode —获取字母按键值
• getKey –为事件提供一个规格化的按键码。
• getWheelDelta –获取跨浏览器的，规格化的鼠标滚轮滚动量
• getXY
• preventDefault
• stopPropagation

Ext.EventManager 对象

Ext.EventManager采用单例模式创建。封装注册事件处理函数，它们 想要接受一个规格化的EventObject，而不是标准的浏览器事件， 并且直接提供一些有用的事件。

目前ext注册事件的方式有以下三种

• Ext.EventManager 的on来指定元素指定事件
  
  • on为 缩写，addListener : function(element, eventName, fn, scope, options)
• Ext元素的on为自身注册事件
  
  • Ext.get().on
• Ext.addBehavious 添加多个元素的多个事件
  
  • Ext.addBehavious({
'#foo a@click':function(e,t){},
'#bar a,#foo a@mouseover':function(){}
})

基本事件扩展

• Ext.onReady
  此函数是 Ext.EventManager.onDocumentReady 的缩写，实现文档完全载入
• Ext.KeyMap类 快捷键实现
  var map =new Ext.KeyMap('my-el',[
{key:[10,13],fn:function(){}},
{key:'abc',fn:function(){}},
{key:'\t',fn:function(){}},
])
• Ext.KeyNav 导航键
  var nav = new Ext.keyNav('my-el',{
'left':function(e){this.moveLeft()},
'right':function(e){this.moveRight()},
'enter':function(e){this.save()}
})
• Ext.util.ClickRepeater 鼠标按住事件
  一个包装类，可以应用到任何元素上。当鼠标被按下时触发一个”click”事件。 每次触发之间的间隔可以在配置项中指定，默认为20毫秒。可选地，在元素被按下时 可以为它应用一个CSS类。

Ext组件事件

未完继续。。。。