1

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那么在这种情况下如何将参数传递给函数呢？

4

2 回答 2

1

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

  2. 在这一行AssigningEventHandles(element, "dblclick", RawClicked(this));中， RawClicked 是在this绑定到全局对象的情况下执行的。所以传递的参数handler是AssigningEventHandles这个函数的结果，它是无效的。您应该像这样传递函数：AssigningEventHandles(element, "dblclick", RawClicked);然后使用this.id而不是raw.idin RawClicked。

固定代码：

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/

于 2013-01-17T20:30:52.560 回答
-1

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

于 2013-01-17T20:37:45.420 回答