[javaScript] keydown 이벤트 추가 & 중복 이벤트 발생 방지

안녕하세요, 이번에는 javaScript에서 input 태그에 enter 키가 눌렸을 때 처리할 keydown 이벤트를 추가하는 방법과,  중복 이벤트 발생을 방지하는 방법에 대해서 알아보겠습니다.

 

html 코드 :

<input type="text" id="todo_input" placeholder="insert title..">

 

js 코드 :

$(function() {
		
	// 	.... 생략
    
    var keydown = false;    // 중복 발생 방지하기 위한 변수
    const $input = document.getElementById('input-title');	// id값으로 htmlElement 찾기
    
    // 해당 element에 addEventListener 추가
    $input.addEventListener('keydown', function (e) {
        if (keydown) return;	// keydown을 했다면 종료.
        else {
            // key가 Enter이고, 빈칸 입력이 아닐 때 실행!
            if (e.key == 'Enter') {
                keydown = true;     // 엔터키가 눌렸고, 빈칸 체크도 완료했을 때, true로 값을 줘서 중복 실행 방지!
                $.ajax({
                    url: 'http://localhost:8080/title',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        title: $('#' + $input.id).val()
                    }),

                    success: function (result) {
                        console.log(result);
                        addTodo(result);
                        $('#input-title').val(''); // input 공백으로 초기
                        keydown = false;	// 다시 keydown 변수 초기화
                    }
                });
            }
        }
    });
    
    //...
});

boolean 타입 keydown 변수를 사용하는게 핵심입니다.  keydown 변수를 설정해주지 않으면 중복 이벤트가 발생하게 됩니다!

먼저 keydown 변수를 false로 설정해준 다음, enter키를 눌렀다면 그때! keydown 변수를 true값으로 설정해줘서 추가로 엔터키 이벤트가 발생하지 않도록 해줍니다. 그리고 요청을 처리 완료했다면, 다시 keydown 변수를 false로 초기화 해주셔야 합니다!! 

그럼 끝!