분류 전체보기

19. 이벤트 기본동작 취소

지금까지 이벤트를 만들어 설치하는 작업들을 해봤다. 이벤트는 사용자가 정의한 것 뿐만아니라 기본적으로 갖고있는 것들이 있다. 예를들어, 텍스트필드에서 입력했을 "때" 텍스트가 입력되거나 form에서 submit을 클릭했을 "때" 데이터가 전송되거나 a 태그를 클릭했을 "때" href 속성에 정의된 URL로 이동되는 것과 같은 것이다. 즉, 사용자가 정의한 이벤트가 아닌 브라우저가 갖고있는 이벤트 기본동작이다. 몇 가지 방식 별로 살펴보자. 1. 인라인 방식 간단한 코드를 작성해본다. event 동작 방지 localhost 위 소스코드의 문서는 다음과 같다. HTML의 태그는 문단(paragraph)을 정의할 때 사용된다. 3개의 문단을 만들었다. 1번째 문단은 "event 동작 방지" 라는 label을 ..

18. 이벤트 전파(버블링/캡처링)

HTML은 부모와 자식관계의 구조를 갖는다. 위와 같은 HTML 코드가 있다면, input 태그는 fieldset 태그에 감싸져 있고, fieldset 태그는 body 태그에 감싸져 있고, body 태그는 html 태그에 감싸져 있다. 여기에 자바스크립트를 이용하여 input, fieldset, body, html 각각 이벤트 핸들러를 설정했다고 가정해본다. input 태그의 버튼을 클릭했을 때, html 이벤트핸들러 => body 이벤트핸들러 => fieldset 이벤트핸들러 => input 이벤트핸들러 순 으로 실행이 되는 것이 캡처링이다. 반대로, 가장 내부에 있고 안쪽에 있는 구체적인 엘리먼트에 대한 이벤트부터 발생하여 상위 태그들로 나아가면서 실행되는 것이 버블링이다. 1. 캡처링 위에서 간략하..

17. 이벤트

이벤트란 ? 어떠한 사건을 의미한다. 브라우저에서 사건이란 클릭, 스크롤을 올리거나 내리는 행위, 필드의 내용을 바꾸는 등의 행위 같은 것들을 의미한다. 정확히 말해서 클릭한 "순간", 스크롤 한 "순간", 필드의 내용을 바꾼 "순간" 등 행위를 한 순간순간이라고 보면 된다. 이러한 이벤트가 발생했을 때 어떠한 작업을 할 지 코드를 작성하는 것을 "이벤트 프로그래밍" 이라고 한다. 위와 같은 단순한 HTML 코드가 있다. CLICK 이라고 써져있는 버튼을 클릭하면 숫자 1을 표시하는 경고창이 뜬다. 이 때 CLICK 이라고 써져있는 버튼, 위 HTML 코드로 되어있는 button 타입의 input 태그를 이벤트 타겟(Event Target) 이라고 한다. 이벤트타겟은 이벤트가 발생하는 대상이다. 그리고 ..

16. Node 종류 API

말 그대로 Node가 어떤 종류의 Node인가를 확인할 수 있는 기능을 말한다. Node 라는 객체에 있는 여러 프로퍼티들을 출력한다. 대문자로 되어있는 것은 상수라고 한다. 정해져있는 값이라는 의미이다. 이 결과가 의미하는 것은, 어떠한 노드가 엘리먼트 객체에 해당하는 노드라면 ELEMENT_NODE 로 접근할 수 있으며 숫자값은 1이 되고 어떠한 노드가 텍스트에 해당하는 노드라면 TEXT_NODE 로 접근할 수 있고 숫자값이 3이 된다 라는것을 의미한다. Chelsea Liverpool Tottenham Son Kane Alli 위와 같은 코드가 있다고 한다면, start 라는 id값을 가진 body 엘리먼트에 대한 객체를 변수 A에 담았다. 이 body 노드의 nodeType을 확인해보면, 1이라는..

15. Node 관계 API

Node 객체는 DOM에서 시조와 같은 역할을 하며 모든 DOM 객체는 Node 객체를 상속받는다. *시조 : 어떠한 사상을 처음 개척한 사람 각각의 엘리먼트들은 서로 부모, 자식, 형제/자매 관계로 연결되어있다. 각 엘리먼트들이 어떠한 관계로 연결되어있는지를 Node API를 통해 프로그래밍적으로 확인할 수 있다. Node 관계 API 앞서 설명했다시피 HTML 코드에 있는 문서의 모든 구성요소의 객체는 공통적으로 Node 객체를 상속받는다. 예제코드를 통해 프로그래밍적으로 어떠한 관계로 연결되어있는지 확인해본다. Chelsea Liverpool Tottenham Son Kane Alli body 태그의 id를 start 로 주고 자바스크립트부분에서 해당 엘리먼트의 객체를 변수 A에 담았다. 그럼 A라..

14. jQuery 조회 범위 제한

DOM 에서 특정한 엘리먼트의 하위에 속해있는 엘리먼트를 조회할 땐, 조회하고자하는 엘리먼트를 감싸고있는 상위 엘리먼트 객체에 대해서 getElement(s)By~ 를 사용한다. 위 처럼 특정 엘리먼트 조회 시 jQuery 에서의 사용은 다음과 같다 1) $('a b'); 2) $('b', 'a'); 3) $('a').find('b'); 위 모두 a 엘리먼트에 한해서 b 엘리먼트를 조회하는 것이다. 코드로 확인해보면, Son Messi Tottenham Kane Alli 위와 같이 HTML 엘리먼트들을 만들었다. 자바스크립트 부분이다. Tottenham_id 라는 id를 가진 엘리먼트에 한해서 Tottenham_class 라는 class 명을 가진 엘리먼트들을 조회한 후, css 메소드를 적용하는 것이다..