当我在 DOM 事件属性中调用函数时，如何确保它可以访问事件的 `this`？

Question

我试图在

click

事件发生时调用函数。 在函数本身中，我指的是

this

：

function move(e) {
  var myId = this.id;
  console.log(myId);
}

<button id="A1" onclick="move()">#A1</button>
<button id="A2" onclick="move()">#A2</button>
<button id="A3" onclick="move()">#A3</button>

但是我运行整个过程，控制台显示“未定义”。当我尝试

alert(this);

时，我得到“[对象窗口]”。

我该如何解决这个问题？

Answer 1

this

是代码中的

window

对象。

您可以传递

this

作为参数。

<td id="A1" onclick="move(this)" class="white"></td>

然后：

function move(ele){
    var myId = ele.id;
    alert("myId");
}

Answer 2

当从事件处理程序调用函数时，其

this

不是由处理程序设置的（尽管您可以根据 Xdazz 的答案从处理程序传递

this

，或根据 Kyle 的答案设置

this

）。另一种方法是从与事件关联的事件对象中提取发送者元素：

function move(e) {
    if (!e)
        e = window.event;
    var sender = e.srcElement || e.target;

    //maybe some nested element.. find the actual table cell parent.
    while (sender && sender.nodeName.toLowerCase() != "td")
        sender = sender.parentNode;

    var myId = sender.id;
    alert(myId);
}
​

您还必须显式传递事件：

onclick="move(event)"

请注意，当表格单元格具有嵌套元素时，它们将成为“发送者”，因此要获取所需的元素（即表格单元格），您必须向上遍历。 为了避免所有这些令人头疼的问题，请参阅下面如何通过代码附加处理程序。

现场测试用例.

也就是说，更好的做法是通过代码而不是内联绑定点击事件 - 不要将 HTML 与 JavaScript 混合。为了实现这一点，有这样的代码：

window.onload = function() {
    var arrCells = document.getElementsByTagName("td");
    for (var i = 0; i < arrCells.length; i++) {
        var oCell = arrCells[i];
        if (oCell.id && oCell.id.substr(0, 1) == "A") {
            oCell.onclick = move;
        }
    }
}

使用上述代码后，您可以从 HTML 中删除内联

onclick=

调用并保留原始函数 -

this

将指向单击的表格单元格。

更新了小提琴。

Answer 3

<td id="A1" onclick="move.call(this)" class="white"></td>

现在

this

将引用

td

函数中的

move

元素。

Answer 4

尝试使用事件目标来获取您正在寻找的 dom 元素：

function move(e) {
  alert(e.target);
}