javascript - 无需调用即可触发 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 调试问题时，我知道两个事件触发器都在同时运行，因为我点击了第一个问题的选项

标签： javascripthtmldom

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>