How can i bind control events to a function declared using javascripts prototyping

Question

I'm trying to create a html page and add some javascript event handling via a prototype object, so in theory we would have:

1: A standard html page which would create a prototyped object and call a prototype function during the bodys "onLoad" event.

This function would in turn associate a controls event with a second prototype function in the class.

In this example i'd like to capture the textboxes change event, but the actual pages will have a fair number of controls.

<!DOCTYPE html>
<html>
 <head>
    <title></title>
    <meta charset="utf-8" />
    <script src="jquery-1.10.2.js"></script>
    <script src="jquery.blockUI.js"></script>
    <script src="jquery.mobile-1.3.2.js"></script>
    <script src="searchAddress.js"></script>
    <script>
        function loadIt() {
            SearchAddressController = new SearchAddressControllerBase;
            SearchAddressController.BindTheCotrols();
        }
    </script>
</head>
<body onload="loadIt()">

    <input name="textHouseNo" type="text" id="textHouseNo" value="" placeholder="House No" data-clear-btn="true" maxlength="20" />
    <input name="texPostcode" type="text" id="texPostcode" value="" placeholder="Post Code" data-clear-btn="true" maxlength="20" />
    <button></button>
</body>
</html>

The code that is in searchAddress.js is

var SearchAddressControllerBase = function () {
    this.houseNumber = null;
    this.postCode = null;
};

SearchAddressControllerBase.prototype.GeneralEventHandler = function (c, e) {
    // would like the text boxes change event to land here...

}

SearchAddressControllerBase.prototype.BindTheCotrols = function () {

    // bind the controls here
    $("#textHouseNo").change(this.GeneralEventHandler('textHouseNo', 'change'));
};

I need to create this separation between the html and js as it will ultimately be generated rather than hand-cranked.

Any help explaining how i can get the BindTheControls function to make the change event for textHouseNo route to GeneralEventHandler would be appreciated.

A couple of the the links i've been looking at are: Advantages of using prototype, vs defining methods straight in the constructor? and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

What is the problem? I'm confused what you are trying to ask... — Kevin Jantzer, Sep 23 '16 at 17:28
The BindTheCotrols function gets called but i'm unsure how to get it to usethe GeneralEventHandler to handle events from the html controls. Have updated my question so hopefully its a bit clearer. — Matt, Sep 23 '16 at 17:35

score 1 · Accepted Answer · edited Sep 23 '16 at 17:58

You're really close; when you do this:

$("#textHouseNo").change(this.GeneralEventHandler('textHouseNo', 'change'));

You are actually invoking GeneralEventHandler immediately instead of assigning it to the change event. You need to change it to:

$("#textHouseNo").change(this.GeneralEventHandler);

Then in the handler method, you can get info about the event like this:

function (evt) {
  var el = evt.currentTarget
  var type = evt.type;
  var id = el.id
  var val = el.value

  console.log(id, type, val)
}

Check out the working demo

var SearchAddressControllerBase = function () {
    this.houseNumber = null;
    this.postCode = null;
};

SearchAddressControllerBase.prototype.GeneralEventHandler = function (evt) {
    // would like the text boxes change event to land here...
  
  var el = evt.currentTarget
  var type = evt.type;
  var id = el.id
  var val = el.value
  
  console.log(id, type, val)
}

SearchAddressControllerBase.prototype.BindTheCotrols = function () {

    // bind the controls here
    $("#textHouseNo").change(this.GeneralEventHandler);
};

 function loadIt() {
    SearchAddressController = new SearchAddressControllerBase;
    SearchAddressController.BindTheCotrols();
}


// would be called from "onload"
loadIt()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="textHouseNo" type="text" id="textHouseNo" value="" placeholder="House No" data-clear-btn="true" maxlength="20" />
    <input name="texPostcode" type="text" id="texPostcode" value="" placeholder="Post Code" data-clear-btn="true" maxlength="20" />
    <button></button>

How can i bind control events to a function declared using javascripts prototyping

1 Answers1

Check out the working demo