web-dev-qa-db-ja.com

classListを指定したquerySelectorAll（）に対するaddEventListener

イベントリスナーを追加しようとしていますが、結果がありません。 JavaScriptには巻き上げ機能があることは知っていますが、正しい解決策以外はすべて試したと思います。

const cbox = document.querySelectorAll(".box");
function doit() {
    for (let i = 0; i < cbox.length; i++){
        cbox[i].classList.add("red");
    }
}
cbox.addEventListener("click", doit,false);

誰かが私が犯した間違いを見つけられますか？

javascriptaddeventlistener
5
Evan

コードと指定したリンクにはいくつかの相違点があります。そこには関数doit()はありません。 cbox.addEventListener("click",.....のaddEvenListenerにNodeListを添付しました

以下を試してください：

const cbox = document.querySelectorAll(".box");

 for (let i = 0; i < cbox.length; i++) {
     cbox[i].addEventListener("click", function() {
       cbox[i].classList.toggle("red");
     });
 }
*,
html,
body {
    padding: 0;
    margin: 0;
}

.box {
    width: 10rem;
    height: 10rem;
    background-color: yellowgreen;
    float: left;
    position: relative;
    margin: 0.5rem;
    transition: .5s all;
}

h3 {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.box:not(:first-child) {
    margin-left: 1rem;
}

.red {
    background-color: orangered;
}
<div id="box1" class="box box1">
    <h3>Box 1</h3>
</div>
<div id="box2" class="box box2">
    <h3>Box 2</h3>
</div>
<div id="box3" class="box box3">
    <h3>Box 3</h3>
</div>
<div id="box4" class="box box4">
    <h3>Box 4</h3>
</div>
1
Mamun

クラスでforEachを使用するか、イベントの委任を使用できます。

const cboxes = document.querySelectorAll(".box");
function doit() {
    ... do something ...
}
cboxes.forEach(
  function(cbox) {
   cbox.addEventListener("click", doit,false);
  }
);

変数名を変更したことに注意してください。

EventDelgation

HTML：

<div id="parent">
  <div id="box1" class="box box1">
    <h3>Box 1</h3>
  </div>
  <div id="box2" class="box box2">
      <h3>Box 2</h3>
  </div>
  <div id="box3" class="box box3">
      <h3>Box 3</h3>
  </div>
  <div id="box4" class="box box4">
      <h3>Box 4</h3>
  </div>
</div>

JSパート：

const parent = document.querySelector("#parent");

parent.addEventListener('click', (e) => {
  e.target.classList.add('red');
  console.log(e.target);
});

1つのイベントリスナーのみを使用し、forループを使用しないため、イベントの委任ははるかに優れており、使用するリソースが少なくなります。

0
Riad ZT