Question

我正在尝试将click事件设置为<a>

中的TD标记

我有

test.prototype.buildData = function() {
 cell = createElement('td', {innerHTML: "<a class='link' onclick='"+this.edit(this)+"'>"+ value + "</a>"});
 this.table.appendChild(cell);

 //many cells..all need to attached the click event

}

test.prototype.edit=function(this){
  this.style.backgroundColor='red'  
}

我想修改点击的cell background color。我还需要将click事件仅注册到<a>标记。我知道我的this.edit(this)没有意义。

反正有没有这样做？非常感谢！

Answer 1

您可以在创建时自动将ID分配给<a> -

var newCellId = 0;
test.prototype.buildData = function() {
  cell = createElement('td',
   {innerHTML: "<a class='link' id='dynamicCellId_"+String(newCellId)+"'"+     value + "</a>"});
  this.table.appendChild(cell);
  newCellId +=1;
}

然后，您可以使用document.getElementById('dynamicCellId_X')

跟踪所有这些内容

Answer 2

沿着这些方向尝试一些事情......

test.prototype.buildData = function (value) {
    var cell = document.createElement("td"),
        anchor = document.createElement("a");

    anchor.className = "link";
    anchor.addEventListener("click", (function (self) {
        return function () {
            self.edit(this);
        };
    })(this), false);
    anchor.innerHTML = value;

    cell.appendChild(anchor);

    this.table.appendChild(cell);
};

test.prototype.edit = function (el) {
    el.style.backgroundColor = "red";
};

注意：

当您通过addEventListener方法将函数指定为事件处理程序时，函数中this的值是触发事件的DOM元素。
addEventListener的第二个参数是一个函数，它就像JavaScript中的其他所有对象一样。因此，您可以使用立即调用的函数表达式返回一个包含实际事件处理代码的函数。
如果您是JavaScript的新手，this的价值可能会非常棘手。如果你看看我的IIFE，这是在＆＃34之后的括号内定义的功能;点击＆＃34;对于addEventListener方法的参数，您应注意我将this作为参数传递给最后一个（在false参数之前）。我在这里做的是从this方法的角度传递buildData的值，该方法等同于test.prototype。然而，IIFE认为它是self参数，因此在返回的函数中，它使用参数{self＆＃39; s test.prototype）edit方法调用{ {1}}在这种情况下是触发事件的元素。
this将一个元素作为其单个参数并更改背景颜色。

javascript附加点击事件问题

2 个答案: