更改事件侦听器源的样式 [已关闭]-解网

问：

闭。这个问题不可重现或是由错别字引起的。它目前不接受答案。

这个问题是由错别字或无法再现的问题引起的。虽然类似的问题可能在这里是主题，但这个问题的解决方式不太可能帮助未来的读者。

昨天关闭。

改进此问题

我被困在一个简单的问题上 - 我如何定位在纯 JS 中动态创建的事件侦听器（div）的源并更改其样式？

我的目标是从 divs 动态创建网格（效果很好），当用户将鼠标悬停在 div 上时，它们会更改背景颜色。

我想出了一个主意，但它行不通。我不确定这种方法是否正确，因为鼠标悬停用户事件用户的来源不是吗？本身不是 div？

请问，您知道如何解决这个问题吗？

function createGrid() {
  for (let i = 0; i < 256; i++) {
    const node = document.createElement("div");
    node.classList.add('grid-item')
    document.getElementById("gridc").appendChild(node);
  }
}

window.addEventListener("load", createGrid());

let items = document.querySelectorAll('.grid-item');
for (var i = items.length; i--;) {
  items[i].addEventListener("mouseover", function(e) {
    e.source.style.backgroundColor = 'blue';
  });
}

.grid-container {
  display: grid;
  width: 60px;
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
}

.grid-item:hover {
  background-color: blue;
}

<div class="grid-container" id="gridc"></div>

JavaScript的

您需要提供对处理程序的函数引用，而不是立即调用该函数的返回值。createGrid()load
使用 event，而不是 .后者将针对鼠标在元素上移动的每个像素触发，这远远超出了本例所需的数量。mouseentermousemove
在创建每个单元格时绑定鼠标事件处理程序。不需要两个单独的循环。
在页面加载时从 DOM 中检索一次元素，而不是在循环的每次迭代中检索元素。DOM 操作非常慢（相对而言），应该谨慎进行。事实上，从单个 HTML 字符串构建整个网格并在单个操作中将其附加到 DOM 中甚至可能性能更高。不过，我将把这留给 OP 来决定。#gridc

const gridContainer = document.querySelector('#gridc');
const cellMouseEnterHandler = e => e.target.style.backgroundColor = '#00F';

function createGrid() {
  for (let i = 0; i < 256; i++) {
    const node = document.createElement("div");
    node.classList.add('grid-item')
    node.addEventListener('mouseenter', cellMouseEnterHandler);
    gridContainer.appendChild(node);
  }
}

window.addEventListener("load", createGrid);

.grid-container {
  display: grid;
  width: 60px;
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
}

.grid-item:hover {
  background-color: blue;
}

<div class="grid-container" id="gridc"></div>

0赞 Mister Jojo 11/18/2023 #2

您还可以将事件委托与事件一起使用：mousemove

const gridContainer = document.querySelector('#gridc');
  
for (let i = 0; i < 256; i++)
  gridContainer
   .appendChild( document.createElement('div'))
   .classList.add('grid-item');

gridContainer.addEventListener('mousemove', e =>
  {
  if (!e.target.matches('.grid-item')) return
  e.target.style.backgroundColor = 'red';
  })

.grid-container {
  display: grid;
  width: 60px;
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
}

<div class="grid-container" id="gridc"></div>

上一个：let codeExpression = new RegExp（/^（（\d{5}-\d{4}）|（\d{5}）|（[A-Z|a-z]\d[A-Z|a-z]\d[A-Z|a-z]\d））$/);我可以更改或添加什么以使 spcace [关闭]

下一个：如何在 Laravel 中使用 jQuery Ajax 创建喜欢/不喜欢功能？

更改事件侦听器源的样式 [已关闭]

Change style of Source of Event Listener [closed]

评论