事件侦听器如何指向不同的对象？

Question

我正在尝试完成 Odin 项目中的 TicTacToe 作业。

这是我的 JavaScript

const boxes = document.querySelectorAll('.box');
console.log(boxes);
console.log('working');

const board = [
];

for (let i = 0; i<boxes.length; i++) {
    const objectBox = {position: i+1,
                        ownership: 'none'}

    board.push(objectBox);
    boxes[i].addEventListener("click", function(){
        console.log(this);
    });

}

这是我的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://css.gg/css?=|bot|boy" rel="stylesheet">

</head>
<body>
<div id="container">
  <h1>Tic Tac Toe</h1>
    <div id="board">
        <div class="box no-ownership"></div>
        <div class="box no-ownership"></div>
        <div class="box no-ownership"></div>
        <div class="box no-ownership"></div>
        <div class="box no-ownership"></div>
        <div class="box no-ownership"></div>
        <div class="box no-ownership"></div>
        <div class="box no-ownership"></div>
        <div class="box no-ownership"></div>

    </div>
</div>

<script src="script.js"></script>
</body>
</html>

所以我有一个数组，其中包含具有广场所有权等信息的对象。显然 eventlistener 指向 div 所以我无法访问该对象。例如，当我点击第一个方块

时，我想要访问 objectBox[0]

我在网上找不到任何信息。

提前致谢。

Answer 1

您可以在事件处理程序中引用 objectBox 变量，因为它是在同一范围内定义的。

const objectBox = {position: i+1,
                    ownership: 'none'}

board.push(objectBox);
boxes[i].addEventListener("click", function(){
    console.log(this);
    console.log(objectBox.ownership);
});

EDIT2：这通常是不好的做法，最好将 HTML 元素和数据对象映射到自定义变量，或者：“更简洁的方法是使用数据属性来存储索引要与此元素关联的数据对象的名称。” @AdityaParab

除此之外，我相信您可以将 objectBox 变量本身分配给查询的元素，例如：编辑：评论

for (let i = 0; i<boxes.length; i++) {
    //declares variable (allocates memmory and returns "pointer")
    const objectBox = {position: i+1,
                    ownership: 'none'}

    board.push(objectBox);
    boxes[i].dataObject = objectBox;
    boxes[i].addEventListener("click", function(){
        console.log(this);
        //holds the reference to objectBox regardeless of i value
        //the loop creates 9 event handlers and each stores reference to the object created in relevant loop run
        console.log(this.dataObject);
    });
}

编辑：它如何不起作用

如果您尝试创建 objectBox 变量，然后在两个单独的循环中在 onclick 方法中引用它们...

for (let i = 0; i<boxes.length; i++) {
    //declares variable (allocates memmory and returns "pointer")
    const objectBox = {position: i+1, ownership: 'none'}
}

for (let i = 0; i<boxes.length; i++) {
    boxes[i].addEventListener("click", function(){
        //this would assign the LAST objectBox to ALL event handlers, as the objectBox variable would be 9 times overwritten in the previous loop
        console.log(this.dataObject);
    });
}

事件侦听器如何指向不同的对象？

How can an event listener point to a different object?

javascript

arrays

object

addeventlistener