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

버블링과 캡쳐링에 대해서 이미 정리한 내용이 있다. 그런데 어째서 이 버블링과 캡쳐링을 써야 하는지 의문이 들때가 있다. 실제 예시가 없으면 왜 필요한지 알 수 없기 때문이다. 우선 가장 간단하게 알 수 있는 이벤트 위임(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'는 웹페이지 로드가 완료됨을 나타낸다. 그리고 이러한 행동이 진행..

다른 글에선 HTML에 컨텐츠를 추가하거나 읽어줄 때 다음과 같은 방법을 사용한다고 했다. 선택된 요소 노도의 텍스트 값 확인: 'textContent' 선택된 요소 노도의 텍스트 값 확인: 'innerText' 선택된 요소 노도의 텍스트+태그까지 확인: 'innerHTML' 이 중에서 'innerHTML'은 텍스트 뿐 아니라 태그는 따로 분류하여 처리한다. 만약에 자바스크립트를 통해 HTML 화면상에 무언가 문서를 추가로 넣고 싶다면 'innerHTML'을 쓴다. 다만 'innerHTML'은 보안상의 문제를 일으킬 수 있다. 그렇다면 어떻게 해야 상대적으로 안전하게 HTML 화면에 내용을 추가해줄 수 있을까? 그럴 때는 각종 노드를 만들고 다루는 메서드를 이용하면 된다. 우선 간단하게 보면 다음과 같다..

우리는 다른 게시글을 통해 속성 노드의 생성, 수정, 삭제를 배웠다. 요소 노드에 속성 노드를 추가하기 위해선 다음과 같은 메서드를 사용했다. 속성 노드 확인 : hasAttribute() 메서드, getAttribute() 메서드, 속성 노드 생성 : setAttribute() 메서드 속성 노드 삭제 : removeAttribute() 메서드 예를 들어서 아무 속성도 없는 요소 노드에 글자에 색상도 넣고 싶다면 다음과 같이 코드를 짜면 된다. 테스트 문장입니다. 위 코드를 실행하면 아래와 같이 변한다. 위 코드를 쓰면 한 번에 여러 속성값 전달할 수도 있다. 1. 속성 노드의 간략화 하지만 문제는 이렇다. 저렇게 쓸 경우 한 두개의 요소 노드 컨트롤은 어렵지 않다. 하지만 수백개의 요소 노드의 색상을 ..

HTML 조작시 어트리뷰트(attribute) 즉 속성값을 이용해야하는 경우가 존재한다. 단순히 텍스트만 수정한다면 굳이 속성값을 이용할 필요가 없을지 모른다. 하지만 HTML 컨텐츠에 색상을 입히거나 다양한 효과를 주고 싶다면 속성값을 이용하게 된다. 사실 속성값은 그 종류가 굉장히 다양하지만 몇 가지만 알면 충분히 활용이 가능하다. 1. 어트리뷰트 노드 접근하기 위와 같은 HTML의 태그가 있다고 생각해보자. 이 태그를 선택하기 위해선 아래처럼 'getElementsByTagName' 메서드를 이용하면 된다. 하지만 뭔가 조잡하다. 게다가 'getElementsByTagName'메서드는 태그의 내용이 바뀌면 선택 내용도 바뀐다. 그렇다면 해당 태그가 가진 'id' 속성값 또는 'class' 속성값을 ..

DOM을 이용해 HTML을 조작할 때 해당 요소 노드가 가진 자식 노드를 조작해야할 때가 있다. 즉 요소 노드 밑의 '텍스트 노드'를 다룰 때가 있다. 예시로 보자. 1번 2번 3번 위 HTML 코드를 실행하면 다음과 같은 결과가 나온다. 이때 1번 요소 텍스트에 접근하고 싶다면 어떻게 하면 될까? 참고로 각 노드가 가진 값 즉 value를 가져오는 프로퍼티는 'nodevalue'다. 그럼 이렇게 하면 되지 않을까? 답은 코드에도 썼듯이 'null'이다. 요소 노드의 값을 읽어오라고 'nodevalue' 프로퍼티를 썼는데 왜 못읽어올까? 바로 그 이유는 요소 노드와 텍스트 노드는 층위가 다르기 때문이다. 즉 텍스트 노드는 요소 노도의 하위 관계이므로 요소 노드의 값으로 바로 불러오는 것이 아니다. 요소 ..