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

이벤트 객체란? 이벤트 객체란 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'는 웹페이지 로드가 완료됨을 나타낸다. 그리고 이러한 행동이 진행..

find 메서드 자바스크립트 고차 함수 중에서 filter를 통해서 검색 기능을 구현할 수 있다고 했다. 그리고 배열 메서드 중 filter를 이용한 검색 기능과 비슷한 기능을 하는 메서드가 있다. find 메서드를 이용하면 배열에서 조건에 해당하는 첫번째 값을 반환한다. 사용법은 다음과 같다. 다른 배열 메서드와 마찬가지로 호출한 배열의 요소, 인덱스, 배열을 콜백함수를 통해 전달받을 수 있다. findindex 메서드 findindex는 find와 기능이 같다. 다만 배열의 value가 아닌 인덱스 값을 넘겨준다. 다른 배열 메서드와 마찬가지로 호출한 배열의 요소, 인덱스, 배열을 콜백함수를 통해 전달받을 수 있다.

every와 some 메서드를 사용하면 배열 안에 특정 조건을 만족하는 요소가 있는지 판별할 수 있다. some 메서드 some 메서드는 배열 안의 요소 중 some이 파라미터로 받은 콜백함수의 조건에 맞는 요소가 단 한 개라도 있으면 true를 반환한다. 이때 some 메서드로 호출한 콜백함수는 some 메서드를 호출한 배열 요소, 배열의 인덱스, 배열 그 자체를 파라미터로 받아올 수 있다. every 메서드 every 메서드는 배열 안의 모든 요소가 every가 파라미터로 받은 콜백함수의 조건에 모두 해당되야 true를 반환한다. 이때 every 메서드로 호출한 콜백함수는 some 메서드를 호출한 배열 요소, 배열의 인덱스, 배열 그 자체를 파라미터로 받아올 수 있다.

reduce함수란? 지금까지 배열을 다루는 메서드들의 대부분은 콜백함수를 인자로 가졌다. 그리고 콜백함수는 인자로 메서드를 호출한 배열의 요소, 인덱스, 배열을 제공받았다. 그런데 reduce 메서드는 조금 다르다. 우선 reduce의 간단한 사용법을 보자. reduce의 간단 사용법 위 코드는 reduce 함수를 통해 num 배열의 모든 요소를 더해서 반환하는 코드다. reduce 메서드는 다른 배열 메서드와 달리 배열의 각 요소들에 대해 reduce 함수를 실행한다. 그리고 이 요소들을 합쳐서 하나의 결과값을 반환한다. 다른 메서드들이 새로운 배열을 만들어 반환한 것과 다른 모습이다. reduce 메서드의 인자로 주어진 콜백함수는 인자로 총 4가지 요소를 갖는다. ● 누적 계산 요소 ● 배열 요소 ●..