테스트 사이트 - 개발 중인 베타 버전입니다

이벤트 리스너 한 번만 실행하기 채택완료

엑스엠엘 3년 전 조회 1,644

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

검색을 해 보니

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개

채택된 답변
+20 포인트
3년 전

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 6개

엑스엠엘
3년 전
힌트를 조금 더 주시면 안 될까요?
keypress->target
change->target
같은 element를 가리키기는 할 텐데요.
백수1995
3년 전
[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]

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

이렇게 순차적으로 실행될 듯합니다.
백수1995
3년 전
그럼 debouncing 처리 확인해보세요

https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa
엑스엠엘
3년 전
이런 trick도 "신선한" 방법이네요.
백수1995
3년 전
트릭이라시니 더 신선합니다.

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

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

불린변수를 하나 만들어서

문서 최초에는 true 를 주고

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

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

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

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

로그인