[js] 이벤트와 이벤트 핸들러

이벤트

자바스크립트에서 이벤트는 웹 페이지에서 발생하는 동작이나 사건을 나타냅니다. 버튼을 클릭하거나 마우스를 움직이는 것, 키보드를 입력하는 것들이 이벤트입니다. 이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수로, 이벤트에 대한 반응을 정의하게 됩니다

이벤트 핸들러

이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수입니다. 이벤트 핸들러는 이벤트를 감지하고 이벤트에 대한 반응을 정의하는데 사용됩니다. 이벤트 핸들러는 일반적으로 HTML 요소에 연결되어 특정 이벤트가 발생했을 때 실행되는 동작을 정의합니다.

예를 들어, 영문자를 입력하고 엔터를 입력하면, 입력된 영문자의 갯수를 write 하는 코드가 있습니다.

<input type="text" id = "input" onkeypress = "input(event);">

html에서 키보드에서 입력받았을 때, 이벤트를 생성하여 이를 js의 이벤트 핸들러로 가져갑니다.

 

function input(event){
            var input = document.getElementById("input").value; //input에 입력받은 문자열 저장
            var count = 0; //입력받은 문자 갯수 저장
            const eng = /^[A-Za-z]+$/; //영문자만 입력받기 위한 정규식
            if(event.keyCode == 13){ //엔터키를 눌렀을 때
                for(var i = 0; i < input.length; i++){ //입력받은 문자열의 길이만큼 반복
                    if(eng.test(input[i])){ //intput[i]가 영문자라면
                        console.log(input[i]); //문자열의 i번째 문자를 출력
                        count++; //입력 문자 갯수를 1개 추가
                    }
                    else{
                        console.log("영문자가 아닙니다.");
                    }
                }
                document.write("입력받은 영문자 갯수는 " + count + "개 입니다.");
            }
        }

위의 코드에서 input이라는 함수를 선언하고, html의 이벤트로부터 값을 받아옵니다.

엔터가 입력되었을 때, 다음 조건이 실행됩니다.

1. input[i]의 문자가 영문자인지 판별합니다.

2. 영문자라면, 콘솔 로그에 input[i]의 문자를 추가하고

3. 문자 갯수를 판별할 count 함수에 1을 더합니다.

4. i가 입력받은 문자 수보다 크거나 같아지기 전까지 계속 반복합니다.

5. 최종적으로 콘솔 로그에는 입력한 영문자를, 웹페이지에는 입력한 영문자의 갯수를 작성합니다.

 

따라서, 위의 코드는 입력하고 엔터를 눌렀을 때, 이벤트 핸들러인 input함수가 실행되어 이벤트에 반응하게 됩니다.

이와 같은 방식으로 다양한 이벤트를 감지하고 처리할 수 있습니다.