如何附加事件“ondblclick”，其直接分配的处理程序以“this”为参数答案

【问题标题】：How to attach event "ondblclick", whose handler in direct assign take "this" as parameter如何附加事件“ondblclick”，其直接分配的处理程序以“this”为参数
【发布时间】：2013-01-17 20:02:52
【问题描述】：

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 传递给函数呢？

【问题讨论】：

标签： javascript parameters event-handling dom-events

【解决方案1】：

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

【讨论】：

你试过我帖子末尾的 jsfiddle 链接了吗？为我工作；）
是的，我看到了，这就是为什么我实际上投票支持你的答案，尽管它对我不起作用:)

【解决方案2】：

在 firefox（使用 addEvenListener）中，处理程序似乎在元素范围内运行，因此在 RawClicked 中使用“this”应该可以按预期工作

【讨论】：

pawel 的回答肯定更好！