2

이벤트 리스너 콜백을 한 번 실행하려고합니다.once : addEventListener를 true로 설정하면 IE11 또는 Edge에서 작동하지 않습니다.

을 한 번 : addEventListener 편리 내가 그것으로 전달할 수있는 플래그가 부울는 청취자가 추가 된 후 최대 한 번 호출되는 것을 나타내는. 참이면 리스너는 호출 될 때 자동으로 제거됩니다.

모든 브라우저에서 환상적으로 작동합니다. IE11 및 Edge를 제외합니다. 발생 후 이벤트 리스너를 수동으로 제거 할 수 있다는 것을 알고 있지만이 플래그가 작동해야합니다 ... 잘못된 일을하고 있습니까? 아니면 IE에서 인정한 문제입니까? 그렇지 않으면

Should you prefer JSFiddle

: 없음 IE/EDGE 지원 :

var div = document.getElementById('transition'); 
 
var result = document.getElementById('result'); 
 

 
window.grow = function(){ 
 
    var width = div.offsetWidth + 50; 
 
    div.style.width = width + 'px'; 
 
} 
 

 
var count = 0; 
 
div.addEventListener('transitionend', function(){ 
 
    result.innerHTML = "transitionend has fired " + ++count + " times"; 
 
}, { once: true });
#transition{ 
 
    background-color: yellow; 
 
    transition: width 2s; 
 
    width: 100px; 
 
}
<div id="transition"> 
 
    Content 
 
</div> 
 
<button onclick="grow()"> 
 
    Grow the div 
 
</button> 
 
<div id="result"> 
 

 
</div>

+3

옛날 개가 할 수없는 새로운 트릭입니다. – dandavis

답변

2

docs의 브라우저 호환성 섹션을 확인합니다. caniuse도 도움이됩니다.