如何让我的 div 方块响应点击

Question

 let container = document.getElementById('container'); function getGrid(gridNumber) { for (let i = 1; i <= gridNumber * gridNumber; i++) { const row = document.createElement('div'); row.style.border = '1px solid red' container.appendChild(row).classList.add('box'); } } getGrid(16);

 .banner { display: flex; justify-content: center; } .divcontainer { display: flex; flex-direction: column; align-items: center; justify-content: center; } #container { margin-top: 100px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .box { height: 20px; width: 20px; }

 <div class="banner"> <div class="banner-text"> <h1> Etch-a-Sketch </h1> </div> </div> <div class="divcontainer"> <div id="container"></div> </div>

我正在制作一个简单的 etech 草图，到目前为止我已经创建了一个方形 div 网格。 我需要一些关于从这里去哪里的方向。 我想我需要为我使用 javascript dom 操作注入的每个 div 附加 keydown 事件侦听器，但是如何将事件侦听器添加到注入的 div 中？

Answer 1

您可以在创建 HTMLElement 后随时将事件侦听器添加到它，只要您保留对它的引用，在本例中为变量row

const row = document.createElement('div');
row.addEventListener('click', event=>{
    //... Reaction ...
})

Answer 2

使用事件委托。 这意味着添加一个事件侦听器来捕获冒泡的事件。 在那里检查单击的元素是否是您期望的元素。

const container = document.getElementById('container');

container.addEventListener('click', event => {
  const isbox = event.target.closest('.box') !== null;
  if (!isBox) {
    // Not a box, do nothing.
    return;
  }

  // Assert logic
});

Answer 3

我不确定这是否是您想要的行为，但您可以直接在行上添加事件（我已经设置了一个条件，以防您想要“取消着色”所选框）

 let container = document.getElementById('container'); function getGrid(gridNumber) { for (let i = 1; i <= gridNumber * gridNumber; i++) { const row = document.createElement('div'); row.style.border = '1px solid red' container.appendChild(row).classList.add('box'); row.addEventListener('click', function(event) { if (row.style.background === 'green') row.style.background = 'none' else row.style.background = 'green' }); } } getGrid(16);

 .banner { display: flex; justify-content: center; } .divcontainer { display: flex; flex-direction: column; align-items: center; justify-content: center; } #container { margin-top: 100px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .box { height: 20px; width: 20px; }

 <div class="banner"> <div class="banner-text"> <h1> Etch-a-Sketch </h1> </div> </div> <div class="divcontainer"> <div id="container"></div> </div>

Answer 4

事件委托是最好的解决方案。 不是向所有网格方块添加侦听器，而是向父元素添加一个侦听器，并让其监视来自其子元素的事件，因为它们“冒泡”DOM。

当监听器捕获一个事件时，它首先检查触发它的元素是否是一个盒子（它可能有其他不是我们想要忽略的盒子的子元素），然后它执行一些代码 - 在这种情况下它切换框上的filled类。

（我在这个扩展的示例中使用了您的 CSS，并在 HTML 中重命名了几个 ids/classes。）

 // Cache the grid element, and add a listener to it const grid = document.querySelector('.grid'); grid.addEventListener('click', handleClick); function getGrid(gridNumber) { for (let i = 1; i <= gridNumber * gridNumber; i++) { const box = document.createElement('div'); // Renamed the variable, and added the border // color to CSS instead box.classList.add('box'); grid.appendChild(box); } } getGrid(16); // When an element is clicked the listener (attached // to the `.grid` parent element) checks that that // it was a box, and then toggles a `filled` class on // that clicked element function handleClick(e) { if (e.target.matches('.box')) { e.target.classList.toggle('filled'); } }

 .banner { display: flex; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 0 2em 0; } .grid { display: grid; grid-template-columns: repeat(16, 1fr); } .box { height: 20px; width: 20px; border: 1px solid red; } .box:hover { cursor: pointer; } .box:hover:not(.filled) { background-color: red; opacity: 0.3; } .filled { background-color: red; }

 <div class="banner"> <div class="banner-text"> <h1> Etch-a-Sketch </h1> </div> </div> <div class="container"> <div class="grid"></div> </div>