Implementing event handlers

How to define custom event handlers

The KingTable offers a strategy to define custom event handlers that is stylistically adopted from Backbone library. For example:

  <script id="custom-filters" type="text/html">
    <div>
      <select id="some-select">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
      </select>
      <button id="button-a">Button A</button>
      <button id="button-b">Button B</button>
    </div>
  </script>

Then, define event handlers for button-a and button-b, this way:

  var table = new KingTable({
    url: "...",
    element: document.getElementById("container"),
    events: {
      "click #button-a": function (e) {
        //this is the instance of KingTable
        //e is the instance of jQuery event
        //to obtain the clicked element, use e.currentTarget
      },
      "click #button-b": function (e) {
        //button-b click event handler
      },
      "change #some-select": function (e) {
        //some-select change event handler
      }
    }
  });

Another possible notation, like in Backbone library, is:

  var table = new KingTable({
    url: "...",
    element: document.getElementById("container"),
    events: {
      "click #button-a": "firstFunction",
      "click #button-b": "secondFunction",
      "change #some-select": "thirdFunction"
    },
    firstFunction: function (e) {
    
    },
    secondFunction: function (e) {
    
    },
    thirdFunction: function (e) {
    
    }
  });