컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

이벤트 객체란? 이벤트 객체란 DOM을 이용한 이벤트에 연결된 함수에서 매개변수로 얻을 수 있는 객체다. 이 객체는 발생한 이벤트에 관한 다양한 정보를 가지고 있다. 그리고 이벤트 객체는 다양한 메서드와 프로퍼티를 가지고 있어서 이벤트를 더욱 세심하게 컨트롤할 수 있다. 우선 어떻게 사용하지는 보도록 하자. 이벤트 객체 테스트 버튼입니다. 위 코드는 버튼 클릭 이벤트 발생시 콘솔창에 각종 이벤트 객체 관련 정보가 출력되도록 설정한 함수다. 이때 이벤트 리스너의 콜백 함수를 통해 매개변수로 이벤트 객체를 받게 된다. 위 코드를 실행하고 화면 상의 버튼을 클릭하면 콘솔창에 다음과 같이 뜬다. 위 그림처럼 실행됐던 이벤트에 관한 다양한 정보를 얻을 수 있다. 그리고 이외에도 이벤트 객체를 이용하여 다음과 같은..

버블링과 캡쳐링에 대해서 이미 정리한 내용이 있다. 그런데 어째서 이 버블링과 캡쳐링을 써야 하는지 의문이 들때가 있다. 실제 예시가 없으면 왜 필요한지 알 수 없기 때문이다. 우선 가장 간단하게 알 수 있는 이벤트 위임(event delegation)을 통해 알아보자. 1번 버튼 2번 버튼 3번 버튼 4번 버튼 5번 버튼 div 밖의 버튼 위와 같은 코드가 있다고 생각해보자. 만약 5개의 버튼에 기능을 준다고 생각해보자. 기존 방법을 쓰면 다음과 같이 해야한다. 1번 버튼 2번 버튼 3번 버튼 4번 버튼 5번 버튼 div 밖의 버튼 5개의 버튼을 이용하려면 5개의 객체를 만들고 일일이 이벤트 리스너 메서드를 지정해줘야 했다. 하지만 이벤트 캡쳐링을 이용하면 이를 쉽게 극복할 수 있다. 1번 버튼 2번 ..

자바스크립트에서 이벤트를 실행하면 버블링과 캡쳐링이란 것을 발생하게 할 수 있다. 간단하게 말하자면 이벤트가 발생 시 HTML 문서 구조상 이벤트가 다른 문서로 전이되는 것을 말한다. 코드를 살펴보자. 1. 캡쳐링과 버블링 캡쳐링과 버블링 위 코드를 살펴보자. 대략 그림으로 위 HTML문서의 구조를 나타내면 다음과 같다. 이때 여기서 버튼을 누르면 어떤 결과가 나올까? 다음과 같은 결과가 나온다. 버튼은 한번만 눌렀는데 결과값은 4개가 나온 것이다. HTML 문서의 각 노드들은 어딘가 종속되어있는 계층적 구조로 이뤄진다. 그래서 어느 한 곳에서 이벤트가 발생하면 다른 곳으로 이벤트가 전파된다. 그리고 이때 이 이벤트가 전파되는 방향에 따라 이것을 캡쳐링과 버블링이라고 부르는 것이다. 둘은 구분하면 다음과..

이벤트 핸들러란? 브라우저 상에서 특정한 동작이 발생했을 때 이벤트가 일어난다. 그리고 이때 실행되는 코드 블럭을 이벤트 핸들러라고 한다. 이벤트 리스너라고 부르기도 하지만 정확히 말하면 조금 차이가 있다. 이벤트 리스너는 이벤트 발생하기를 기다렸다가 이를 수신한다. 이벤트 핸들러는 이벤트 발생 후 준비된 코드를 실행한다. 이벤트 핸들러의 종류 이벤트 핸들러의 종류는 3가지다. - 인라인 이벤트 핸들러 - 이벤트 핸들러 프로퍼티 - addEventListener 메서드 아래서 설명하겠지만 인라인 이벤트 핸들러는 현재는 잘 쓰지 않는다. 'HTML'과 자바스크립트가 분리되지 않는 문제가 생긴다. 그래서 코드가 길어지면 가독성이 떨어지고 문제가 생길 확률이 높아지기 때문이다. 1. 인라인 이벤트 핸들러 버튼..

이벤트란? 프론트엔드를 배울 때 맨 처음에 다음과 같이 배웠다. HTML은 문서의 구조, CSS는 스타일, 자바스크립트는 동적기능을 목적으로 한다. 자바스크립트의 이벤트는 그러한 목적을 수행하는 동작의 하나다. 즉 간단히 말하면 HTML상에서 일어나는 다양한 행동에 맞게 반응하게 동작을 말한다. 다만 엄밀히 말하면 HTML, DOM을 비롯해 다른 분야에서 사용이 가능하다. 이벤트의 실행 이벤트 관련 내용입니다. 위 코드는 자바스크립트 이벤트의 가장 대표적이고 기본적인 이벤트 코드다. 해당 코드는 브라우저에 표시될 내용이 모두 표시되면 경고창으로 메시지를 띄우는 이벤트다. 여기서 'window'는 'window'객체를 가리키고 'onload'는 웹페이지 로드가 완료됨을 나타낸다. 그리고 이러한 행동이 진행..