Creating events in JavaScript like C#

Question

I primarily write code in C#. However, I'm working with some JavaScript. I have defined a class in JavaScript as shown here:

function Item(id, name) {
    this.ID = id;
    this.Name = name;

    // define event submitCompleted
    this.submit = function() {
      // When the submission is completed, fire "submitCompleted" event.
    };
}

My challenge is, I don't know how to create and fire custom events in JavaScript. If this was C#, I'd do the following:

public class Item
{
  public string ID { get; set; }
  public string Name { get; set; }

  public Item(string id, string name)
  {
    this.ID = id;
    this.Name = name;
  }

  public event EventHandler SubmitCompleted;
  public void Submit() 
  {
    // Submission logic
    SubmitCompleted(this, EventArgs.Empty);
  }
}

How do I do the equivalent in JavaScript? Thank you!

The point of events in C# is so that some container can "listen" to the event and handle it externally. What container are you intending to use to listen to this event? What object in your page is the subscriber? — Joel Etherton
– Joel Etherton, Commented Nov 6, 2011 at 14:07

Darin Dimitrov · Accepted Answer · 2011-11-06 14:05:20Z

3

function Item(id, name, submitCompleted) {
    this.ID = id;
    this.Name = name;
    this.submitCompleted = submitCompleted;

    // define event submitCompleted
    this.submit = function() {
        // When the submission is completed, fire "submitCompleted" event.
        // we are passing 2 arguments to the callback: id and name
        submitCompleted(id, name);
    };
}

var item = new Item(1, 'some name', function(id, name) {
    alert('id = ' + id + ', name = ' + name);
});
item.submit();

answered Nov 6, 2011 at 14:05

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Glory Raj · Accepted Answer · 2011-11-06 14:15:52Z

you can create custom events in javascript like this.....

<script type="text/javascript">
function Event()
{
     this.eventHandlers = new Array();
}

Event.prototype.addHandler = function(eventHandler){
this.eventHandlers.push(eventHandler);
}

Event.prototype.execute = function(args){

  for(var i = 0; i < this.eventHandlers.length; i++)
  {
     this.eventHandlers[i](args);
   }
}

function showName()
{
     alert("My name is stikiflem."); 
}

function getFaveMovie(arg)
{
     alert("My favourite movie is: " + arg + "."); 
}

function test()
{
     //create event
     myHandler = new Event();

    //add handler
    myHandler.addHandler(showName);
    myHandler.addHandler(getFaveMovie);

    //raise event
    myHandler.execute("Ghost in the Shell");
}

</script>
<body>
<input type="button" value="Click to create and execute events"
onClick="test()" />
</body>

DeveloperX · Accepted Answer · 2011-11-06 14:11:10Z

0

Use custom event definition in javascript

Custom Javascript Events

answered Nov 6, 2011 at 14:11

DeveloperX

4,69319 silver badges22 bronze badges

Comments

BenMorel · Accepted Answer · 2014-01-08 11:38:21Z

0

If you prefer using jQuery then its pretty easy

//to register an event
$(selector).bind('customEvent', eventHandler)

// to raise an event
$(selector).trigger('customEvent')

If you looking for plain JS way, then

var newObj = function(){
 var submitHdlr = [];
 this.bind = function(handler){
  submitHdlr.push(handler);
 }
 this.submit = function(){
  // do something
  for(i in submitHdlr) 
   i(); // raise each handler
 }
}

edited Jan 8, 2014 at 11:38

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Nov 6, 2011 at 14:11

hungryMind

7,0214 gold badges32 silver badges46 bronze badges

Collectives™ on Stack Overflow

Creating events in JavaScript like C#

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related