javascript - ontransitionend不触发/附加，但addEventListener起作用

这是一个简化的测试用例：

var div = document.createElement('div');
div.classList.add('test');
document.body.appendChild(div);
window.setTimeout(
  function() {
    div.style.boxShadow = '0 0 100px blue';
    div.ontransitionend = function() {
      console.log('transition end');
    };
    div.onclick = function() {
      console.log('click');
    };
  }, 100);

div.test {
  width: 100px;
  height: 100px;
  background: red;
  box-shadow: none;
  transition: box-shadow 1s;
}

单击div正确会触发onclick消息，但是过渡结束不会触发“ transition end”消息。更改事件处理程序使其起作用：

div.addEventListener('transitionend', function() { console.log('transition end'); } );

为什么内联和addEventListener有什么区别？

根据MDN的说法，ontransitionend应该可以按我编写的方式工作，并且进行搜索时，Chrome确实支持它没有前缀（实际上我记得以前使用它时没有问题）。值得注意的是，该MDN页面上显示的示例对我来说在Chrome中不起作用（不显示“缩放”和“完成”文本）。

最佳答案

显然答案是Chrome由于某种原因does not support ontransitionend or several other transition events，即使我发誓我以前也曾经使用过它们……

Firefox可以正确运行我的测试用例和MDN的测试用例。

关于javascript - ontransitionend不触发/附加，但addEventListener起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52695986/