Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 59 down vote favorite
20

I have attached an event to a text box using addEventListener. It works fine. My problem arouse when I wanted to trigger the event programmatically from another function.

How can I do it?

share|improve this question

4 Answers

up vote 80 down vote accepted

You can use fireEvent on IE, and w3c's dispatchEvent on most other browsers. To create the event you want to fire, you can use either createEvent or createEventObject depending on the browser.

Here is a self-explanatory piece of code (from prototype) that fires an event dataavailable on an element:

  var event;
  if (document.createEvent) {
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
  } else {
    event = document.createEventObject();
    event.eventType = "dataavailable";
  }

  event.eventName = eventName;
  event.memo = memo || { };

  if (document.createEvent) {
    element.dispatchEvent(event);
  } else {
    element.fireEvent("on" + event.eventType, event);
  }
share|improve this answer
2  
Dont't forget that only the IE version has the 'on' in front (I missed that at first) – missingno Sep 15 '11 at 13:05
16  
What does the variable eventName contain here? – NeDark Sep 15 '11 at 19:49
@Alsciende how can I attach my event handler to this custom event? – ThemeZ Apr 26 '12 at 8:35
Can we tell me what eventName contain? – user1365010 Jun 8 '12 at 9:22
dataavailable should be in the eventName variable I believe. – fearphage Dec 12 '12 at 21:23
show 1 more comment
up vote 3 down vote

You can use jquery to trigger a event programmatically. for more details see http://api.jquery.com/trigger/

share|improve this answer
16  
Anantha - only if they've been added using jQuery. – RobG Jul 27 '11 at 2:41
13  
@Anantha-Kumaran I think the question was aimed at a pure js solution. – hitautodestruct Nov 7 '11 at 15:00
this is still useful as an easy alternative – Aram Kocharyan Dec 28 '12 at 5:44
2  
adding a library is overkill to solve the OP's question. and no, overkill is not a solution. :) – davidg Apr 10 at 18:19
up vote 0 down vote

I am using the following functions to do my task. It works fine when cursor moves away from textbox but if i want to fire the same event from code say like next function i get 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
}
share|improve this answer
1  
"obj" is pretty much the worse parameter / variable name ever. – Alex Grande Feb 13 at 19:50
up vote 0 down vote

A jQuery plugin that fire real JavaScript events https://github.com/FGRibreau/jQuery-plugin-fireEvent

share|improve this answer
2  
This doesn't really answer the question, but the plugin is at least interesting – qodeninja Jan 19 at 18:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.