CODEWITHSUNDEEP
c#javascript
Phone Developer
Phone Developer

Reputation: 1461

Creating events in JavaScript like C#

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!

Upvotes: 1

Views: 1571

Answers (4)

hungryMind
hungryMind

Reputation: 6999

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
 }
}

Upvotes: 0

Glory Raj
Glory Raj

Reputation: 17701

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>

Upvotes: 2

DeveloperX
DeveloperX

Reputation: 4683

Use custom event definition in javascript

Custom Javascript Events

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038890

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();

Upvotes: 3

Related Questions