I'm trying to simulate mouse events like click, mouseover etc on app build in ExtJs. I'm using below code to simulate click,
function triggerEvent(element, eventName)
{
if (document.createEvent)
{
var evt = document.createEvent('MouseEvents');
evt.initEvent(eventName, true, true);
return element.dispatchEvent(evt);
}
}
var btn = document.getElementById("loginButton");
triggerEvent(btn, "click");
This works fine on chrome and firefox but never works on IE9 and IE10. If I use btn.fireEvent('onlclick') then it works fine in IE9 (not checked in IE10). document.createEvent is supported in IE9 & IE10 but I'm not sure why my code is not working.
I have had the same issue with custom events some time ago and solved by using the code found in this other question: Custom events in IE without using libraries
Actually you don't need to use all the code, they are 3 function to use as wrapper for browser compatibility.
But I also suggest you to use the .click method which would solve your problem more easily (at least for normal click) http://www.w3schools.com/jsref/met_html_click.asp
so just do
document.getElementById("loginButton").click();
I am pasting here the code by sergey gospodarets from the other question, which could be useful.
function triggerEvent(el,eventName){
var event;
if(document.createEvent){
event = document.createEvent('HTMLEvents');
event.initEvent(eventName,true,true);
}else if(document.createEventObject){// IE < 9
event = document.createEventObject();
event.eventType = eventName;
}
event.eventName = eventName;
if(el.dispatchEvent){
el.dispatchEvent(event);
}else if(el.fireEvent && htmlEvents['on'+eventName]){// IE < 9
el.fireEvent('on'+event.eventType,event);// can trigger only real event (e.g. 'click')
}else if(el[eventName]){
el[eventName]();
}else if(el['on'+eventName]){
el['on'+eventName]();
}
}
function addEvent(el,type,handler){
if(el.addEventListener){
el.addEventListener(type,handler,false);
}else if(el.attachEvent && htmlEvents['on'+type]){// IE < 9
el.attachEvent('on'+type,handler);
}else{
el['on'+type]=handler;
}
}
function removeEvent(el,type,handler){
if(el.removeventListener){
el.removeEventListener(type,handler,false);
}else if(el.detachEvent && htmlEvents['on'+type]){// IE < 9
el.detachEvent('on'+type,handler);
}else{
el['on'+type]=null;
}
}
var _body = document.body;
var customEventFunction = function(){
alert('triggered custom event');
}
// Subscribe
addEvent(_body,'customEvent',customEventFunction);
// Trigger
triggerEvent(_body,'customEvent');