日期:2014-05-16  浏览次数:20481 次

ExtJS4.0源代码分析--类系统之EventObject
Ext.EventObject是对浏览器原生事件对象的封装。在JavaScript,事件分为三类:HTMLEvents,MouseEvents,UIEvents。HTMLEvents包括
       <li>load</li>
      <li>unload</li>
      <li>select</li>
      <li>change</li>
      <li>submit</li>
      <li>reset</li>
      <li>resize</li>
      <li>scroll</li>
,MouseEvents包括
* <li>click</li>
     * <li>dblclick</li>
     * <li>mousedown</li>
     * <li>mouseup</li>
     * <li>mouseover</li>
     * <li>mousemove</li>
     * <li>mouseout</li>
,UIEvents包括
* <li>focusin</li>
     * <li>focusout</li>
     * <li>activate</li>
     * <li>focus</li>
     * <li>blur</li>

在符合dom标准的浏览器中,document中有个createEvent方法可以用来创建上述三种类型的事件之一的事件对象,创建HTMLEvents类型的事件对象的代码为:
createHtmlEvent: function (doc, type, bubbles, cancelable) {
                    var event = doc.createEvent('HTMLEvents');

                    event.initEvent(type, bubbles, cancelable);
                    return event;
                }

创建MouseEvents类型的事件对象的代码为:
createMouseEvent: function (doc, type, bubbles, cancelable, detail,
                                            clientX, clientY, ctrlKey, altKey, shiftKey, metaKey,
                                            button, relatedTarget) {
                    var event = doc.createEvent('MouseEvents'),
                        view = doc.defaultView || window;

                    if (event.initMouseEvent) {
                        event.initMouseEvent(type, bubbles, cancelable, view, detail,
                                    clientX, clientY, clientX, clientY, ctrlKey, altKey,
                                    shiftKey, metaKey, button, relatedTarget);
                    } else { // old Safari
                        event = doc.createEvent('UIEvents');
                        event.initEvent(type, bubbles, cancelable);
                        event.view = view;
                        event.detail = detail;
                        event.screenX = clientX;
                        event.screenY = clientY;
                        event.clientX = clientX;
                        event.clientY = clientY;
                        event.ctrlKey = ctrlKey;
                        event.altKey = altKey;
                        event.metaKey = metaKey;
                        event.shiftKey = shiftKey;
                        event.button = button;
                        event.relatedTarget = relatedTarget;
                    }

                    return event;
                }

创建UIEvents类型的事件对象的代码为:
createUIEvent: function (doc, type, bubbles, cancelable, detail) {
                    var event = doc.createEvent('UIEvents'),
                        view = doc.defaultView || window;

                    event.initUIEvent(type, bubbles, cancelable, view, detail);
                    return event;
                }

要想在某个dom元素上触发一个指定的事件,可用以下方法:
fireEvent: function (target, type, event) {
                    target.dispatchEvent(event);
                }





对于IE9以前的版本,可通过document.createEventObject方法创建事件对象,对应于上述符合dom标准的方法如下:
createHtmlEvent: function (doc, type, bubbles, cancelable) {
                    var event = doc.createEventObject();
                    event.bubbles = bubbles;
                    event.cancelable = cancelable;
                    return event;
                },

                createMouseEvent: function (doc, type, bubbles, cancelable, detail,
                                            clientX, clientY, ctrlK