ontransitionend 不是 firing/attaching 但 addEventListener 有效

Question

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

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'); } );

为什么 inline 和 addEventListener 有区别？

根据 MDN，ontransitionend 应该像我写的那样工作，并且四处搜索，Chrome 确实支持它不带前缀（事实上我记得以前使用它没有问题）。值得注意的是，该 MDN 页面上显示的示例在 Chrome.

中对我不起作用（不显示 "zooming" 和 "done" 文本）

Answer 1

显然答案是 Chrome 出于某种原因 does not support ontransitionend or several other transition events，尽管我发誓我以前用过它们...

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

ontransitionend 不是 firing/attaching 但 addEventListener 有效

ontransitionend not firing/attaching but addEventListener works

javascript

css

transition