채택완료

이벤트 리스너 한 번만 실행하기

둘 이상의 이벤트에 이벤트 리스너를 등록할 경우, 한 번만 실행했으면 해서

검색을 해 보니

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개 / 댓글 9개

채택된 답변
+20 포인트

e.target 을 확인하시면 되겠네요

답변에 대한 댓글 6개

힌트를 조금 더 주시면 안 될까요?
keypress->target
change->target
같은 element를 가리키기는 할 텐데요.
[code]
<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)];
});
});
[/code]

이런식이겠죠?
하지만 충분히 빠르다면 두번 실행될수도 있겠네요
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)];

이렇게 순차적으로 실행될 듯합니다.
이런 trick도 "신선한" 방법이네요.
트릭이라시니 더 신선합니다.

lodash 나 underscore 같은 라이브러리 쓰시면 좀더 쉬울것 같네요 ㅎㅎ

불린변수를 하나 만들어서

문서 최초에는 true 를 주고

변수가 true 일 때만 이벤트를 실행하게 구문을 짠 다음에 처음 이벤트 실행시 변수값으로 false 를 주거나 아님 아예 변수를 delete 시키거나 하면 되지 않을까요?

답변에 대한 댓글 3개

보통 그렇게 했는데, 처음 한 번은 되지만
두번째 이벤트가 발행하는 경우가 문제가 될 듯합니다.
그럼 최초변수를 0으로 주고
이벤트 발생시 변수 += 1 로 카운터를 1씩 증대시키면서 거기에 맞는 조건문을 주면 안 될까요.
그리고 예컨대 2이상이 되면 변수를 delete 시키구요.
카운터 방식도 두번째 이벤트가 발생하기전에 reset해야 하는데
이 시점을 잡기 힘드네요.

답변을 작성하려면 로그인이 필요합니다.