Question

RawClicked I have old assign method of tr for event like this:

<tr ondblclick="RawClicked(this) .......

and I want to attach the event in JavaScript code like this, and delete assigning the event handler in HTML tag <tr .... > :

var element = document.getElementById("CustomersTable").getElementsByTagName("tr");
AssigningEventHandles(element, "dblclick", RawClicked(this));

function AssigningEventHandles(element, event, handler) {
    if (element.addEventListener) {
        element.addEventListener(event, handler, false);
    }

    else if (element.attachEvent) {
        element.attachEvent("on"+ event, handler);
    }
}


function RawClicked(raw) {
    var rawDoubleClicked = raw.id;
    alert(rawDoubleClicked);
}

So how can I pass the parameter this to the function in this case?

Answer 1

1. In your example element is a collection of nodes, not a single element, so you can’t add event listeners this way. You may iterate over this collection of nodes or use event delegation and attach event listener to the <table>.

2. In this line AssigningEventHandles(element, "dblclick", RawClicked(this)); RawClicked is executed with this bound to the global object. So the argument passed as handler to AssigningEventHandles is the result of this function, which is void. You should pass the function like this: AssigningEventHandles(element, "dblclick", RawClicked); and then use this.id instead of raw.id in RawClicked.

Fixed code:

var element = document.getElementById("CustomersTable").getElementsByTagName('tr');
AssigningEventHandles(element, "dblclick", RawClicked);

function AssigningEventHandles(element, event, handler) {
  if( !element.length ){ /* convert to array if it's a single node */
    element = [element];
  }
  for( var i=0; i<element.length; i++){ /* iterate over nodes and attach event listeners */
    if (element[i].addEventListener) {
        element[i].addEventListener(event, handler, false);
    }

    else if (element[i].attachEvent) {
        element[i].attachEvent("on"+ event, handler);
    }
  }
}

function RawClicked() {
/* `this` is bound to the clicked element */
    var rawDoubleClicked = this.id;
    alert(this);
}

http://jsfiddle.net/WU76d/