Implementing event handlers

How to define custom event handlers

The KingTable offers a strategy to define custom event handlers. For example, given a custom filters view:

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

To define event handlers for #button-a and #button-b, it's sufficient to:

  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 Event
      },
      "click #button-b": function (e) {
        //button-b click event handler
      },
      "change #some-select": function (e) {
        //some-select change event handler
      }
    }
  });

Another possible notation, 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) {
    
    }
  });