Skip to content
Advertisement

What’s wrong with addlistener… how do I fire my event

I am using the following functions to do my task. It works fine when cursor moves away from the textbox but if I want to fire the same event from code say like next function I get an error…

function addEvent( obj, type, fn ) {
 if (obj.addEventListener) {
  obj.addEventListener( type, fn, false );
 }
 else if (obj.attachEvent) {
  obj["e"+type+fn] = fn;
  obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  obj.attachEvent( "on"+type, obj[type+fn] );
 }
 else {
  obj["on"+type] = obj["e"+type+fn];
 }
}

function addEventByName(ObjName, event, func){
 MyEle = document.getElementsByName(ObjName);
 addEvent(MyEle[0], event, func);
}

addEventByName("txtBox", 'blur', function(){
 alert('hello');
});

function fire(){
 x = document.getElementsByName('txtBox')[0];
 x.blur(); //gives error
 x.onblur(); //gives error
}

Advertisement

Answer

Adapting the code given as a jQuery extension in this answer, here’s a function you can use to programmatically fire an event cross-browser:

function fireEvent(el, eventType)
{
    if (document.createEvent)
    {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(eventType, false, false);
        el.dispatchEvent(evt);
    }
    else if (document.createEventObject)
    {
        el.fireEvent("on" + eventType);
    }
}

Your fire function would then look like this:

var x = document.getElementsByName("txtBox")[0];
fireEvent(x, "blur");
Advertisement