如何附加事件"ondblclick"，其直接赋值中的处理程序将"this"作为参数

Question

RawClicked我有一个旧的tr分配方法为这样的事件:

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

，我想在JavaScript代码中附加这样的事件，并删除在HTML标签<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);
}

那么在这种情况下，我如何将参数this传递给函数呢?

Answer 1

1. 在您的示例中，element是节点的集合，而不是单个元素，因此您不能以这种方式添加事件侦听器。您可以遍历此节点集合，或者使用事件委托并将事件侦听器附加到<table>。

2. 在这行AssigningEventHandles(element, "dblclick", RawClicked(this)); RawClicked被执行，this绑定到全局对象。所以作为handler传递给AssigningEventHandles的参数是这个函数的结果，它是空的。您应该像这样传递函数:AssigningEventHandles(element, "dblclick", RawClicked);，然后在RawClicked中使用this.id而不是raw.id。

固定代码:

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/

Answer 2

在firefox(使用addEvenListener)中，处理程序似乎在元素的范围内运行，因此只需在RawClicked中使用"this"应按预期工作