javascript - 如何附加事件 "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是节点的集合，而不是单个元素，因此您不能以这种方式添加事件监听器。您可以迭代此节点集合或使用事件委托(delegate)并将事件监听器附加到 <table> .

2. 在这一行AssigningEventHandles(element, "dblclick", RawClicked(this)); RawClicked 的执行方式为 this绑定(bind)到全局对象。所以参数传递为 handler至AssigningEventHandles是这个函数的结果，它是无效的。您应该传递这样的函数:AssigningEventHandles(element, "dblclick", RawClicked);然后使用 this.id而不是raw.id在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/