CODEWITHSUNDEEP
javascripteventsevent-handlingdom-events
user
user

Reputation: 99

Event Handling in Javascript using Prototypal Inheritance

I am trying to enable Event Handling in JavaScript. This is what I have so far:

function Field(args) {
    this.id = args.id;

    this.name = args.name ? args.name : null;
    this.reqType = args.reqType ? args.reqType : null;
    this.reqUrl = args.reqUrl ? args.reqUrl : null;
    this.required = args.required ? true : false;
    this.error = args.error ? args.error : null;

    this.elem = document.getElementById(this.id);
    this.value = this.elem.value;

    this.elem.addEventListener('onblur', this, false);
    this.elem.addEventListener('click', this, false);
    this.elem.addEventListener('change', this, false);
    console.log(JSON.stringify(this.elem.value));

}

function FormTitle(args) {
    Field.call(this, args);
}

Field.prototype.getValue = function() { return Helpers.trim( this.value ) };

Field.prototype.sendRequest = function () {

};

Field.prototype.click = function (value) {
    alert("click");  
};

Field.prototype.onblur = function (value) {
    alert("onblur");  
};

Field.prototype.change = function (value) {
    alert("change");  
};

Field.prototype.dblclick = function (value) {
    alert("dblclick");  
};

Field.prototype.handleEvent = function(event) {
    switch (event.type) {
    case "click": this.click(this.value);
    case "onblur": this.onblur(this.value);
    case "change": this.change(this.value);
    case "dblclick": this.dblclick(this.value);
    }
};

// inheritProtootype uses parasitic inheritance to inherit from the Field's prototype
// and then assign the results to FormTitle's prototype.
inheritPrototype(FormTitle, Field);

var title = new FormTitle({name: "sa", id: "title"});

For some reason however, all events are triggered at the same time. For example, when I click on the Title field in the Form, instead of only Click event triggering, all four events are triggered.

What am I doing wrong?

Upvotes: 0

Views: 1190

Answers (3)

Bergi
Bergi

Reputation: 665256

Your switch statements misses some break statements, so in case click all four methods would be executed.

However, there's a better option than a switch-statement:

Field.prototype.handleEvent = function(event) {
    var prop = event.type;
    if (prop in this) // && typeof this[prop] == "function"
        this[prop](this.value);
};

which will work for all events without explicitly mentioning them.

Upvotes: 2

jdigital
jdigital

Reputation: 12296

In your switch statement, you need to have a break after each case.

switch (event.type) {
  case "click": this.click(this.value); break;
  case "onblur": this.onblur(this.value); break;
  case "change": this.change(this.value); break;
  case "dblclick": this.dblclick(this.value); break;
}

The last break isn't needed but it's good practice to include it because you might add additional cases.

Upvotes: 1

Kiruse
Kiruse

Reputation: 1743

Simple. At the end of each of your case blocks, separate it from every succeeding block with a break; statement.

Upvotes: 3

Related Questions