OO design question

Discussion in 'Javascript' started by King Albert, Jan 5, 2007.

  1. King Albert

    King Albert Guest

    Question :
    Is it 'good design' to make an eventhandler a method of your class ?

    Problem in the eventhandler below :
    I need 'this' to refer to Tabel, not to the clicked element !

    function Tabel(dataset, behavior) {

    Tabel.prototype.generatetable() {
    row = document.createElement("tr");

    Tabel.prototype.severalbehaviors(e) {
    var el=e.currentTarget; //now el points to the clicked element
    ... //which is fine because I need the element
    for (var veld in this.dataset[0][0]) { // but I also need to access
    the dataset within the eventhandler

    thx for any help,

    King Albert, Jan 5, 2007
    1. Advertisements

  2. King Albert

    RobG Guest

    If the event handler is designed to work specifically with that class,
    then it's probably a good idea. However, if it's designed to work more
    generally, you may want to create it as part of a utility library.

    You should post 'working' code, preferably a cut and paste of a minimal
    example that shows the behaviour.

    There are many ways to solve your problem, try the following:

    <style type="text/css">
    table {
    border-collapse: collapse;
    border-top: 1px solid blue; border-left: 1px solid blue;
    td { border-bottom: 1px solid blue; border-right: 1px solid blue;}
    <script type="text/javascript">

    var defDataset = ['foo','bar'];

    function Table (dataset, behavior) {
    this.dataset = dataset;
    this.behavior = behavior;

    Table.prototype.generatetable = function (numRows, numCells) {

    // Create a reference to the required object
    var obj = this;
    var row, cell;
    var domTable = document.createElement('table');

    for (var i=0; i<numRows; i++){
    row = domTable.insertRow(-1);
    row.onclick = function(event){

    // Use the Function call method to set the value of this
    // within severalbehaviors to the object you want
    obj.severalbehaviors.call(obj, event);

    for (var j=0; j<numCells; j++){
    cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode('row '+i+', cell '+j));


    Table.prototype.severalbehaviors = function (e) {

    /* AFAIK, IE doesn't support currentTarget and has no equivalent
    * <URL: http://www.quirksmode.org/js/events_order.html#link10 >
    * You may be better to use target/srcElement and go up the
    * DOM tree until you reach the first TR element, or pass a reference
    * to the TR element when attaching the event
    var el = e.currentTarget;

    // Within the function, this refers to the table object IF called
    // by an event handler set by generatetable


    window.onload = function(){
    var t = new Table(defDataset, null);
    t.generatetable(2, 3);


    You could make the dataset a property of the DOM table and not mess
    with the this keyword.
    RobG, Jan 5, 2007
    1. Advertisements

  3. King Albert

    King Albert Guest


    thx a million,

    row.onclick=function(event) {obj.severalbehaviors.call(obj,event);}

    was what I needed. I setup a working example here :


    Select the first dropdown (Bedrijf) and choose 'Aannemingen', then you
    should see tablerows, each preceded with a plus. Click the row to reveal
    an additional row of data, and notice the plus change to a minus, then
    click the minus.

    Answering your remarks:

    1. its an intranet and I can impose FF
    2. working code, next time I'll do the above first..
    3. quirksmode, I bought Koch's book on amazon, but in his introduction he
    ventilates dis-interest in JS OO, and although the event section of his
    book is excellent and his site is fantastic, your line of code should've
    been in 'section 7F:Targeting'.
    4. "dataset as a property of the DOM table":

    I don't understand, before you can create a property, you need the object
    first, like so,


    and then you could do

    resulttbl.dataset= mydatabase;
    assuming somewhere on the page is mydatabase=[{prop1:val1, etc}, {... ];

    But you need the object to be created in a constructor, which implies
    keyword 'this' .. So essentially your last suggestion is : don't do OO !
    Is this correct ?

    kind regards and thx again,

    King Albert, Jan 6, 2007
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.