Event
-
이벤트 객체프론트엔드/JavaScript 2020. 10. 28. 23:11
이벤트 객체란? 이벤트 객체란 DOM을 이용한 이벤트에 연결된 함수에서 매개변수로 얻을 수 있는 객체다. 이 객체는 발생한 이벤트에 관한 다양한 정보를 가지고 있다. 그리고 이벤트 객체는 다양한 메서드와 프로퍼티를 가지고 있어서 이벤트를 더욱 세심하게 컨트롤할 수 있다. 우선 어떻게 사용하지는 보도록 하자. 이벤트 객체 테스트 버튼입니다. 위 코드는 버튼 클릭 이벤트 발생시 콘솔창에 각종 이벤트 객체 관련 정보가 출력되도록 설정한 함수다. 이때 이벤트 리스너의 콜백 함수를 통해 매개변수로 이벤트 객체를 받게 된다. 위 코드를 실행하고 화면 상의 버튼을 클릭하면 콘솔창에 다음과 같이 뜬다. 위 그림처럼 실행됐던 이벤트에 관한 다양한 정보를 얻을 수 있다. 그리고 이외에도 이벤트 객체를 이용하여 다음과 같은..
-
자바스크립트 - 이벤트 핸들러프론트엔드/JavaScript 2020. 10. 19. 17:31
이벤트 핸들러란? 브라우저 상에서 특정한 동작이 발생했을 때 이벤트가 일어난다. 그리고 이때 실행되는 코드 블럭을 이벤트 핸들러라고 한다. 이벤트 리스너라고 부르기도 하지만 정확히 말하면 조금 차이가 있다. 이벤트 리스너는 이벤트 발생하기를 기다렸다가 이를 수신한다. 이벤트 핸들러는 이벤트 발생 후 준비된 코드를 실행한다. 이벤트 핸들러의 종류 이벤트 핸들러의 종류는 3가지다. - 인라인 이벤트 핸들러 - 이벤트 핸들러 프로퍼티 - addEventListener 메서드 아래서 설명하겠지만 인라인 이벤트 핸들러는 현재는 잘 쓰지 않는다. 'HTML'과 자바스크립트가 분리되지 않는 문제가 생긴다. 그래서 코드가 길어지면 가독성이 떨어지고 문제가 생길 확률이 높아지기 때문이다. 1. 인라인 이벤트 핸들러 버튼..