이벤트 리스너 한 번만 실행하기
본문
둘 이상의 이벤트에 이벤트 리스너를 등록할 경우, 한 번만 실행했으면 해서
검색을 해 보니
https://stackoverflow.com/questions/1115000/javascript-stop-additional-event-listeners
여기 답변을 참고해서 다음처럼 했는데,
keypress 경우는 alert()가 두 번씩 나오네요.
<script>
$(document).ready(function(){
$('.rate_e').on( 'keypress change', function( e){
if( e.cancel) { return; }
alert( 'here');
e.cancel=true;
});
});
</script>
디버깅을 해 보니, 첫째와 둘째의 e(이벤트 오브젝트 파리미터)가 같은 오브젝트가 아니어서
위 프로그램이 제대로 실행되지 않은데
좋은 개선 방법이 있을까요?
답변 2
e.target 을 확인하시면 되겠네요
힌트를 조금 더 주시면 안 될까요?
keypress->target
change->target
같은 element를 가리키기는 할 텐데요.
<script>
let eventList = [];
$(document).ready(function(){
$('.rate_e').on('keypress change', function(e){
let eventTarget = e.target();
if(eventList.includes(eventTarget)) { return; }
eventList.push(eventTarget);
alert('here');
delete eventList[eventList.indexOf(eventTarget)];
});
});
이런식이겠죠?
하지만 충분히 빠르다면 두번 실행될수도 있겠네요
keypress 실행
let eventTarget = e.target();
if(eventList.includes(eventTarget)) { return; }
eventList.push(eventTarget);
alert('here');
delete eventList[eventList.indexOf(eventTarget)];
change 실행
let eventTarget = e.target();
if(eventList.includes(eventTarget)) { return; }
eventList.push(eventTarget);
alert('here');
delete eventList[eventList.indexOf(eventTarget)];
이렇게 순차적으로 실행될 듯합니다.
그럼 debouncing 처리 확인해보세요
https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa
이런 trick도 "신선한" 방법이네요.
트릭이라시니 더 신선합니다.
lodash 나 underscore 같은 라이브러리 쓰시면 좀더 쉬울것 같네요 ㅎㅎ
불린변수를 하나 만들어서
문서 최초에는 true 를 주고
변수가 true 일 때만 이벤트를 실행하게 구문을 짠 다음에 처음 이벤트 실행시 변수값으로 false 를 주거나 아님 아예 변수를 delete 시키거나 하면 되지 않을까요?
보통 그렇게 했는데, 처음 한 번은 되지만
두번째 이벤트가 발행하는 경우가 문제가 될 듯합니다.
그럼 최초변수를 0으로 주고
이벤트 발생시 변수 += 1 로 카운터를 1씩 증대시키면서 거기에 맞는 조건문을 주면 안 될까요.
그리고 예컨대 2이상이 되면 변수를 delete 시키구요.
카운터 방식도 두번째 이벤트가 발생하기전에 reset해야 하는데
이 시점을 잡기 힘드네요.