我也来一个,Ext下扩展Ext.Element,使它支持fireEvent模拟事件。(用于开发测试代码)
开发的时候参考了w3c dom相关文档,实测鼠标点击事件是一切OK的
Js代码
(function(){
var eventTypes = ["HTMLEvents", "MouseEvents", "UIEvents", "MutationEvents", "Events"];
var eventMap = {
HTMLEvents : {
abort : true,
blur : true,
change : true,
error : true,
focus : true,
load : true,
reset : true,
resize : true,
scroll : true,
select : true,
submit : true,
unload : true
},
UIEvents : { // 包含MouseEvents
DOMActivate : true,
DOMFocusIn : true,
DOMFocusOut : true,
keydown : true,
keypress : true,
keyup : true
},
MouseEvents : {
click : true,
mousedown : true,
mousemove : true,
mouseout : true,
mouseover : true,
mouseup : true
},
MutationEvents : {
DOMAttrModified : true,
DOMNodeInserted : true,
DOMNodeRemoved : true,
DOMCharacterDataModified : true,
DOMNodeInsertedIntoDocument : true,
DOMNodeRemovedFromDocument : true,
DOMSubtreeModified : true
},
Events : {
// 所有事件
}
};
var getType = function(ename){
var foundType = "Events";
Ext.each(eventTypes, function(type){
var map = eventMap[type];
if(map.hasOwnProperty(ename) && map[ename] === true){
foundType = type;
return false;
}
});
return foundType;
};
var defaultCfg = {
canBubble : true,
cancelable : true,
view : window,
detail : 0,
screenX : 0,
screenY : 0,
clientX : 0,
clientY : 0,
ctrlKey : false,
altKey : false,
shiftKey : false,
metaKey : false,
button : 0,
prevValue : null,
newValue : null,
attrName : null,
attrChange : 1
};
var getDefalutCfg = function(dom, cfg){
cfg = cfg || {};
Ext.applyIf(cfg, defaultCfg);
cfg.relatedTarget = cfg.relatedTarget || dom;
return cfg;
};
Ext.override(Ext.Element, {
/*
* 模拟html dom事件
*/
fireEvent : function(ename, cfg){
var e, type, dom = this.dom;
ename = ename || "";
if(Ext.isIE){
e = document.createEventObject();
Ext.apply(e, cfg);
dom.fireEvent("on" + ename, e);
}else{
type = getType(ename);
cfg = getDefalutCfg(dom, cfg);
e = document.createEvent(type);
switch(type){
case "UIEvents":
e.initUIEvent(ename, cfg.canBubble, cfg.cancelable, cfg.view, cfg.detail);
break;
case "MouseEvents":
e.initMouseEvent(ename, cfg.canBubble, cfg.cancelable, cfg.view, cfg.detail,
cfg.screenX, cfg.screenY, cfg.clientX, cfg.clientY,
cfg.ctrlKey, cfg.altKey, cfg.shiftKey, cfg.metaKey,
cfg.button, cfg.relatedTarget);
break;
case "MutationEvent":
e.initMutationEvent(ename, cfg.canBubble, cfg.cancelable, cfg.relatedNode,
cfg.prevValue, cfg.newValue, cfg.attrName, cfg.attrChange);
break;
default: // Events
e.initEvent(ename, cfg.canBubble, cfg.cancelable);
break;
}
dom.dispatchEvent(e);
}
}
});
})();
(function(){
var eventTypes = ["HTMLEvents", "MouseEvents", "UIEvents", "MutationEvents", "Events"];
var eventMap = {
HTMLEvents : {
abort : true,
blur : true,
change : true,
error : true,
focus : true,
load : true,
reset : true,
resize : true,
scroll : true,
select : true,
submit : true,
unload : true
},
UIEvents : { // 包含MouseEvents
DOMActivate : true,
DOMFocusIn : true,
DOMFocusOut : true,
keydown : true,
keypress : true,
keyup : true
},
MouseEvents : {
click : true,
mousedown : true,
mousemove : true,
mouseout : true,
mouseover : true,
mouseup : true
},
MutationEvents : {
DOMAttrModified : true,
DOMNodeInserted : true,
DOMNodeRemoved : true,
DOMCharacterDataModified : true,
DOMNodeInsertedIntoDocument : true,
DOMNodeRemovedFromDocument : true,
DOMSubtreeModified : true
},
Events : {
// 所有事件
}
};
var getType = function(ename){
var foundType = "Events";
Ext.each(eventTypes, function(type){
var map = eventMap[type];
if(map.hasOwnProperty(ename) && map[ename] === true){
foundType = type;
return false;
}
});
return foundType;
};
var defaultCfg = {
canBubble : true,
cancelable : true,
view : window,
detail : 0,
screenX : 0,
screenY : 0,
clientX : 0,
clientY : 0,
ctrlKey : false,
altKey : false,
shiftKey : false,
metaKey : false,
button : 0,
prevValue : null,
newValue : null,
attrName : null,
attrChange : 1
};
var getDefalutCfg = function(dom, cfg){
cfg = cfg || {};
Ext.applyIf(cfg, defaultCfg);
cfg.relatedTarget = cfg.relatedTarget || dom;
return cfg;
};
Ext.override(Ext.Element, {
/*
* 模拟html dom事件
*/
fireEvent : function(ename, cfg){
var e, type, dom = this.dom;
ename = ename || "";
if(Ext.isIE){
e = document.createEventObject();
Ext.apply(e, cfg);
dom.fireEvent("on" + ename, e);
}else{
type = getType(ename);
cfg = getDefalutCfg(dom, cfg);
e = document.createEvent(type);
switch(type){
case "UIEvents":
e.initUIEvent(ename, cfg.canBubble, cfg.cancelable, cfg.view, cfg.detail);
break;
case "MouseEvents":
e.initMouseEvent(ename, cfg.canBubble, cfg.cancelable, cfg.view, cfg.detail,
cfg.screenX, cfg.screenY, cfg.clientX, cfg.clientY,
cfg.ctrlKey, cfg.altKey, cfg.shiftKey, cfg.metaKey,
cfg.button, cfg.relatedTarget);
break;
case "MutationEvent":
e.initMutationEvent(ename, cfg.canBubble, cfg.cancelable, cfg.relatedNode,
cfg.prevValue, cfg.newValue, cfg.attrName, cfg.attrChange);
break;
default: // Events
e.initEvent(ename, cfg.canBubble, cfg.cancelable);
break;
}
dom.dispatchEvent(e);
}
}
});
})();
使用方法:
Js代码
// 模拟左键点击按钮(mousedown和mouseup并不是必须,只是为了更真实模拟)
el.fireEvent("mousedown", {button:0});
el.fireEvent("mouseup", {button:0});
el.fireEvent("click", {button:0});
// 模拟左键点击按钮(mousedown和mouseup并不是必须,只是为了更真实模拟)
el.fireEvent("mousedown", {button:0});
el.fireEvent("mouseup", {button:0});
el.fireEvent("click", {button:0});
|