IT_susu

이벤트를 짤 때, 이벤트핸들러에 함수명을 적어도 동작합니다.$(document).on('keydown', keyboardInput);위의 예에서 keyboardInput은 다른 곳에 정의되어 있는 함수이죠.위와 같이 코드를 작성하면 jquery에서 이미 이벤트핸들러 함수인 keyboardInput을 호출하는 코드가 이미 적혀있는 것입니다. 또한 keyboardInput 함수에서 파라미터로 받을 수 있는 것이 이벤트 객체입니다.// 이벤트 객체를 사용할 경우 function keyboardInput(e) { console.log(e); }여기서는 e가 이벤트 객체를 받는 파라미터가 되는 것입니다.위 코드를 치고 실행하면 콘솔에서 이벤트객체를 확인할 수 있습니다.

키를 누르면 --> keydown 키 값이 무엇인지 알아내려면 이벤트 객체의 key값의 value를 보면 된다.확인방법)코드를 아래와 같이 작성한 후,$(document).on('keydown', function(event){console.log(event);}); 브라우저의 콘솔 창을 켜 놓고 아무 키나 누르면 event 객체가 뜬다.화살표를 눌러 상세 내용을 보면 'key'라고 쓰여진 키의 값을 확인하면 된다. * 키보드를 누르는 이벤트 작성$(document).on('keydown', function(event){if ( event['key'] === 1 ) {console.log('1번 키를 누르셨습니다.');}});

이벤트는 비일상적인 사건이며, 언제 발생할 지 사전에 예측할 수 없으므로 일반적인 제어흐름과 다르다. 예측 대신 발생하면 감지하여 그에 대응하는 처리를 호출하는 원리로 동작한다. 예) 키보드 esc를 누르면 팝업창이 닫힌다. 파란색 부분이 이벤트 분홍색 부분이 이벤트 핸들링이다. 어떠한 일이 발생하는 것이 이벤트이며, 이벤트가 발생할 때, 어떤 처리를 할 것인지를 명시한 부분이 이벤트 핸들링이다. 코드로 보면, $('.btn_popup').on('click', function(){}); document.getElementById('home').addEventListener('click', function(){}); 이벤트가 실행되는 원리 자바스크립트는 단일 쓰레드이기 때문에 동시에 여러 작업을 할 수 없..