程序员经验分享-hwhale

EventListener 的匿名函数和传递给 EventListener 的定义函数的工作方式不同吗？

2024-02-11

我有一个 div(.game-space) 包含 6 个子框，其中一个是活动框，具有 ('.active-Box) 类，具有绿色背景，

因此，当我单击活动框时，它会将其类（.active-Box）转移到下一个提供绿色背景的框，以这种方式，它会一直移动到最后一个框。另外，我还有重新启动按钮，当我单击它时，游戏应该重新启动，就像活动框类被标记到第一个框一样，从这里它再次转移到下一个框，并在单击时一直转到结束框。

'use strict'
const allBox = document.querySelectorAll('.box');
const activeBox = document.querySelector('.active-box')
const restartButton = document.querySelector('.restart-button')
let active_box_index = activeBox_index_function();

slideBox(allBox[active_box_index]);



/* ======> code1  Anonymous function */
/* 
function slideBox(pass_active_box) {
  pass_active_box.addEventListener('click', function() {
    allBox[active_box_index].classList.remove('active-box')
    allBox[active_box_index + 1].classList.add('active-box')

    active_box_index = activeBox_index_function()
    slideBox(allBox[active_box_index]);
  })
} */


/* ======> code 2 , funtion defined oustside nad passed into EventListener*/

function sliderfunction() {
  allBox[active_box_index].classList.remove('active-box')
  allBox[active_box_index + 1].classList.add('active-box')

  active_box_index = activeBox_index_function()
  slideBox(allBox[active_box_index]);
}

function slideBox(pass_active_box) {
  pass_active_box.addEventListener('click', sliderfunction);
}


// active box index
function activeBox_index_function() {
  let index;
  allBox.forEach((el, indx) => {
    if (el.matches('.active-box')) {
      index = indx
    };
  })
  return index;
}

// when restart button clicked
restartButton.addEventListener('click', function () {
  allBox[active_box_index].classList.remove('active-box')
  allBox[0].classList.add('active-box')

  active_box_index = activeBox_index_function()
})
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,800&display=swap');
@import url('https://fonts.cdnfonts.com/css/common-pixel');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    font-family: 'Poppins', sans-serif;
    color: black;
}

.game--section {
    height: 100vh;
    background-color: #252525;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-space {
    width: 80rem;
    height: 10rem;
    padding: 1rem;
    border-radius: 9px;
    background-color: #f5f5f5;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.box {
    background-color: tomato;
}

.active-box {
    background-color: #099268;
    cursor: pointer;
}

.restart-button {
    font-size: 3rem;
    cursor: pointer;
}
<body>

    <section class="game--section">
        <div class="game-space">
            <div class="box box1 active-box"></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
            <div class="box box4"></div>
            <div class="box box5"></div>
            <div class="box box6"></div>
        </div>
        <div class="restart-button">????</div>
    </section>

    <script src="script.js"></script>
</body>

这是转折点我尝试将相同的代码块作为匿名函数传递给 addEventListener ，并将外部定义的函数传递给 addEventListener 。我发现两者的工作方式不同，其中\

code1) 匿名功能块正在将增量 EventListener 添加到 DOM 元素，由于双事件触发器，它会跳过框。 code2）它没有增加 DOM 元素上的 EventListener，它工作得很好，我什至没有添加removeEventListener 不是 DOM 元素。

有一次，尝试关闭 code1 和 code2 的注释，反之亦然，在将活动框类转移到下一个框 2 到 3 次后，单击“重新启动”并尝试单击它们，您会得到我所怀疑的内容...


似乎当您尝试再次将定义的函数添加到事件监听器时，它不会被添加，而匿名函数是真正匿名的，当您尝试再次将相同的代码添加到事件监听器时，引擎不会将其识别为相同的到之前的函数，因此正在添加多个事件侦听器。看MDN 网络文档 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener了解更多信息。

It says:

如果函数或对象已在事件侦听器列表中 对于此目标，不会再次添加该函数或对象。

and:

如果特定的匿名函数位于事件侦听器列表中 为某个目标注册，然后在代码中， 在 addEventListener 调用中给出了相同的匿名函数， 第二个函数也将被添加到事件监听器列表中 那个目标。

事实上，即使使用匿名函数定义，匿名函数也不相同 即使在循环中，也会重复调用相同的不变源代码。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

addEventListener

OnclickListener

EventListener 的匿名函数和传递给 EventListener 的定义函数的工作方式不同吗？ 的相关文章

随机推荐

热门标签