JavaScript 事件监听器无需调用即可触发

Question

我正在尝试制作一个 ui 表单，其中当用户选择答案/选项时，更改输入值后将出现下一个问题，为此我使用 forEach 循环添加了事件监听器。

这是 HTML

  <div id="one">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <input type="radio" id=q1op1 name="q1" value="1"><label for="q1op1">Option 1</label>
        <input type="radio" id=q1op2 name="q1" value="2"><label for="q1op2">Option 2</label>
        <input type="radio" id=q1op3 name="q1" value="3"><label for="q1op3">Option 3</label>
        <input type="radio" id=q1op4 name="q1" value="4"><label for="q1op4">Option 4</label>
    </div>

    <div id="two">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

        <input type="checkbox" id=q2op1 name="q2" value="1"><label for="q2op1">Option 1</label>
        <input type="checkbox" id=q2op2 name="q2" value="2"><label for="q2op2">Option 2</label>
        <input type="checkbox" id=q2op3 name="q2" value="3"><label for="q2op3">Option 3</label>
        <input type="checkbox" id=q2op4 name="q2" value="4"><label for="q2op4">Option 4</label>

    </div>


        <div id="three">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

        <input type="checkbox" id=q3op1 name="q3" value="1"><label for="q3op1">Option 1</label>
        <input type="checkbox" id=q3op2 name="q3" value="2"><label for="q3op2">Option 2</label>
        <input type="checkbox" id=q3op3 name="q3" value="3"><label for="q3op3">Option 3</label>
        <input type="checkbox" id=q3op4 name="q3" value="4"><label for="q3op4">Option 4</label>

    </div>

和 JavaScript

var a=document.querySelectorAll('#one input');
var b=document.querySelectorAll('#two input');

a.forEach(element=>addEventListener('change', function(){
    document.getElementById('two').scrollIntoView();
}) )


b.forEach(element=>addEventListener('change', function(){
    console.log('hello');
    document.getElementById('three').scrollIntoView();
}) )

一旦我单击第一个问题的选项，窗口就会滚动到第三个问题，而不是第二个问题。当我使用 console.log 调试问题时，我发现当我点击第一个问题的选项时，两个事件触发器都同时运行

Answer 1

发生这种情况是因为您需要将事件添加到每个元素，例如:

element => element.addEventListener('change', function() {

而不是像这样使其成为全局性的:

element => addEventListener('change', function(){

var a = document.querySelectorAll('#one input');
var b = document.querySelectorAll('#two input');

a.forEach(element => element.addEventListener('change', function() {
  document.getElementById('two').scrollIntoView();
}))

b.forEach(element => element.addEventListener('change', function() {
  console.log('hello');
  document.getElementById('three').scrollIntoView();
}))

<div id="one">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <input type="radio" id=q1op1 name="q1" value="1"><label for="q1op1">Option 1</label>
  <input type="radio" id=q1op2 name="q1" value="2"><label for="q1op2">Option 2</label>
  <input type="radio" id=q1op3 name="q1" value="3"><label for="q1op3">Option 3</label>
  <input type="radio" id=q1op4 name="q1" value="4"><label for="q1op4">Option 4</label>
</div>
<div id="two">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <input type="checkbox" id=q2op1 name="q2" value="1"><label for="q2op1">Option 1</label>
  <input type="checkbox" id=q2op2 name="q2" value="2"><label for="q2op2">Option 2</label>
  <input type="checkbox" id=q2op3 name="q2" value="3"><label for="q2op3">Option 3</label>
  <input type="checkbox" id=q2op4 name="q2" value="4"><label for="q2op4">Option 4</label>

</div>


<div id="three">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <input type="checkbox" id=q3op1 name="q3" value="1"><label for="q3op1">Option 1</label>
  <input type="checkbox" id=q3op2 name="q3" value="2"><label for="q3op2">Option 2</label>
  <input type="checkbox" id=q3op3 name="q3" value="3"><label for="q3op3">Option 3</label>
  <input type="checkbox" id=q3op4 name="q3" value="4"><label for="q3op4">Option 4</label>

</div>