文章/答案/技术大牛

发布

社区首页 >问答首页 >无法将javascript eventListener添加到最近创建的元素中

问无法将javascript eventListener添加到最近创建的元素中
EN

Stack Overflow用户

提问于 2020-10-03 08:11:27

回答 3查看 64关注 0票数 0

我使用Javascript来创建625 <div class="box"><div>，然后为每个框添加事件侦听器。成功创建了这些框，但侦听器无法工作。在这里，我的完整代码，我真的很感谢您的所有反应。谢谢

<!DOCTYPE html>
<html>
<head>
    <title>Number AI | Machine Learning Technologhy</title>
    <style>
        .box-container{
            display: grid;
            width: 300px;
            height: 300px;
            border: 1px solid blue;
            grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
        }
        .box{
            width:10px;
            height:10px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function initiateBox(){
            for (let i = 0; i < 625; i++) {
                let box = document.createElement("DIV");
                box.classList.add("box");
                document.querySelector('.box-container').appendChild(box);
            }
        };
        window.onload = initiateBox;
    </script>
</head>
    <body>
        <h2>Number AI</h2>
        <div class="box-container"></div>
        
        <script>
            document.querySelectorAll(".box").forEach(box =>{
                box.addEventListener("mouseover",function(){
                    box.style.backgroundColor = 'black';
                });
            });
        </script>
    </body>
</html>

javascript

web

event-handling

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-10-03 08:15:39

你在这里有几个选择。但是，最简单的(不是高效的)是在框创建中添加事件侦听器，如下所示：

<!DOCTYPE html>
<html>

<head>
  <title>Number AI | Machine Learning Technologhy</title>
  <style>
    .box-container {
      display: grid;
      width: 300px;
      height: 300px;
      border: 1px solid blue;
      grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    }
    
    .box {
      width: 10px;
      height: 10px;
      border: 1px solid black;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function initiateBox() {
      for (let i = 0; i < 625; i++) {
        let box = document.createElement("DIV");
        box.classList.add("box");
        box.addEventListener("mouseover", function() {
          box.style.backgroundColor = 'black';
        });
        document.querySelector('.box-container').appendChild(box);
      }
    };
    window.onload = initiateBox;
  </script>
</head>

<body>
  <h2>Number AI</h2>
  <div class="box-container"></div>
</body>

</html>

但是在任何情况下，如果您想找到一种高效的方法来做到这一点，正如@mplungjan在评论中所指出的，最好使用这样的代表团方法：

<!DOCTYPE html>
<html>

<head>
  <title>Number AI | Machine Learning Technologhy</title>
  <style>
    .box-container {
      display: grid;
      width: 300px;
      height: 300px;
      border: 1px solid blue;
      grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    }
    
    .box {
      width: 10px;
      height: 10px;
      border: 1px solid black;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function initiateBox() {
      const boxContainer = document.querySelector('.box-container');
      for (let i = 0; i < 625; i++) {
        let box = document.createElement("DIV");
        box.classList.add("box");
        boxContainer.appendChild(box);
      }

      boxContainer.addEventListener("mouseover", function(event) {
        const target = event.target;
        if (target.classList.contains('box'))
          target.style.backgroundColor = 'black';
      });
    };
    window.onload = initiateBox;
  </script>
</head>

<body>
  <h2>Number AI</h2>
  <div class="box-container"></div>
</body>

</html>

票数 0

Stack Overflow用户

发布于 2020-10-03 08:13:47

几件事

在负载和鼠标上使用addEventListeners
委托，以便在容器存在后的任何时间对这些框进行验证。
也许CSS悬停是真正做到这一点的方法？

总之，这是委托脚本

function initiateBox() {
  const container = document.querySelector('.box-container');
  for (let i = 0; i < 625; i++) {
    let box = document.createElement("div");
    box.classList.add("box");
    container.appendChild(box);
  }

  container.addEventListener("mouseover", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("box")) tgt.style.backgroundColor = 'black';
  });
};
window.addEventListener("load",initiateBox)

.box-container {
  display: grid;
  width: 300px;
  height: 300px;
  border: 1px solid blue;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.box {
  width: 10px;
  height: 10px;
  border: 1px solid black;
  text-align: center;
}

<title>Number AI | Machine Learning Technologhy</title>

<h2>Number AI</h2>
<div class="box-container">
</div>

票数 1

Stack Overflow用户

发布于 2020-10-03 08:17:25

我认为第二个脚本是在向文档追加box元素之前运行的，因此找不到任何框。您可以将eventListener添加到您创建的initiateBox函数中，如下所示：

function initiateBox(){
        for (let i = 0; i < 625; i++) {
            let box = document.createElement("DIV");
            box.classList.add("box");
            box.addEventListener("mouseover",function(){
                box.style.backgroundColor = 'black';
            });
            document.querySelector('.box-container').appendChild(box);
        }
    };
    window.onload = initiateBox;

如果背景色实际上是您要在mouseOver上更改的属性，我建议使用CSS悬停。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64182095

复制

相似问题

问无法将javascript eventListener添加到最近创建的元素中
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将javascript eventListener添加到最近创建的元素中EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将javascript eventListener添加到最近创建的元素中
EN