최종 수정일 :
(11개월 전)
가끔 onclick, onerror 등의 이벤트가 한 번만 실행돼야 할 때가 있습니다.
가령 이미지에 에러가 있을 때 그 이미지를 다른 이미지로 교체하는 함수를 만들었을 때, 교체된 이미지에도 에러가 있다면 여러분은 콘솔에 찍히는 어마어마한 양의 404 에러를 보실 수 있을 겁니다.
잡렉은 덤이고요.
다행히도, 위와 비슷한 상황을 예방할 수 있도록 이벤트 리스너가 한 번만 작동하게 할 수 있는 간단한 방법이 많습니다.
jQuery
$("#foo").one("click", function() { console.log("두 번째 클릭부턴 표시되지 않습니다.")});
꽤 간단하지만, jQuery를 써야 한다는 단점이 있는 스크립트입니다.
혹 jQuery를 이미 사용 중이셔서 위 단점이 무의미하다면, 제일 간단한 스크립트입니다.
바닐라 (함수 사용하기)
function oneTimeListener(element, type, callback) { element.addEventListener(type, function() { element.removeEventListener(type, arguments.callee); return callback(); });}
함수 하나만 추가하시면 바닐라 자바스크립트에서도 jQuery의 one()을 구현하실 수 있습니다.
oneTimeListener(document.getElementById("foo"), "click", function() { console.log("두 번째 클릭부턴 표시되지 않습니다.")});
함수만 추가하시면 활용은 굉장히 간단합니다.
function bar() { console.log("두 번째 클릭부턴 표시되지 않습니다.")}
oneTimeListener(document.getElementById("foo"), "click", bar);
익명 함수를 사용하지 않으실 땐 위와 같이 코드를 작성합니다.
바닐라 (Event Listener에 옵션 추가하기)
document.getElementById("foo").addEventListener("click", () => { console.log("두 번째 클릭부턴 표시되지 않습니다.")}, {once: true})
최신 자바스크립트를 사용한다면 굳이 oneTimeListener 같은 함수를 만드실 필요 없이, once: true란 옵션 하나로 간단하게 이벤트 리스너가 한 번만 동작하도록 하실 수 있습니다.
