2

我想了解为什么以下代码会以指数方式复制 transitionend 的返回。

这对我来说没有任何意义，因为它们应该具有相同的行为并且应该只执行一次。

下面评论了预期的行为。

(function() {
  var animations = {
    start: function() {
      console.log('animations has started');
      this.transition.run();
    },
    transition: {
      duration: 500,
      run: function() {
        console.log('transitions is running');
        const el = document.querySelector('.box');
        el.classList.toggle('fadein');
        // dont duplicate as expected !!!GOOD BEHAVIOR!!!
        /*el.ontransitionend = function(){
          console.log('transitionend triggered!');
        };*/
        // duplicates at every click !!!BAD BEHAVIOR!!!
        el.addEventListener('transitionend', function() {
          console.log('transitionend triggered');
        }, false);
      }
    }
  };
  const bt = document.querySelector('button');
  bt.addEventListener('click', () => {
    animations.start();
  })
})();
.box {
  width: 100%;
  height: 100vh;
  background: green;
  opacity: 0;
  transition: opacity .5s linear;
}

.box.fadein {
  opacity: 1;
}
<button>Start Transition</button>
<div class="box"></div>```

这是多么奇怪的行为！

4

1 回答 1

3

从MDN 事件处理程序文档：

要设置事件处理程序代码，您只需将其分配给适当的 onevent 属性。只能为元素中的每个事件分配一个事件处理程序。如果需要，可以通过将另一个函数分配给同一属性来替换处理程序。

在元素上设置事件处理程序的最灵活方法是使用 EventTarget.addEventListener 方法。这种方法允许将多个侦听器分配给一个元素，并在需要时删除侦听器（使用 EventTarget.removeEventListener）。

这是什么意思？

el.ontransitionend始终替换“旧”事件处理程序，因为只能有一个属性处理程序。
但是随着el.addEventListener您总是添加一个新的处理程序，只要您不明确删除旧的处理程序，它就会保持不变。

于 2021-06-07T20:32:37.377 回答