div1 div2 div3 여기 div의 영역을 클릭하면 div의 이름이 담긴 alert 창이 나오는 이벤트 핸들러가 있다고 생각해보자. div1, div2, div3에 각각 동일한 핸들러를 바인딩했고, 사용자가 div3의 영역을 눌렀을 때 alert창에는 어떤 순서로 div 이름이 출력될까? 캡쳐링과 버블링은 쉽게 말해서 어떤 한 태그에서 이벤트가 발생하였을 때 자신을 포함한 부모 태그들까지 쭉 훑으며 겹치는 이벤트의 핸들러가 있는지 없는지 검사하는 것을 의미한다. 먼저 캡쳐링은 이벤트가 발생한 요소를 포함하는 부모 태그에서부터 이벤트 근원지인 자식 태그까지 검사하는 것을 의미한다. 그 과정에서 이벤트 캡쳐링 속성의 이벤트 핸들러가 있다면 핸들러를 수행한다. 버블링은 이벤트 발생 요소부터 요소를 포함하..
Javascript 1. 인라인 이벤트 핸들러 (HTML에서 등록) 클릭 클릭 2. 이벤트 핸들러 프로퍼티 (Javascript에서 등록) document.getElementById("div1").onclick = function() { alert('안녕하세요'); } 단, 하나의 프로퍼티에 하나의 핸들러만 바인딩 할 수 있다는 단점이 있다. (인라인 이벤트 핸들러 방식은 여러 함수를 호출할 수 있다.) 3. addEventListener 메소드 // IE 9 이전 버전 document.getElementById("div1").attachEvent("click", openAlert); // IE 9 이후 버전 document.getElementById("div1").addEventListener("cli..
CSS 선택자 활용 일반 선택자 선택자명 선택 범위 표현식 전체 선택자 HTML 문서 내 모든 element * {} 타입 선택자 매칭되는 element 선택 h1, h2, h3 {} 클래스 선택자 class 속성 값과 매칭되는 element 선택 .className {} ID 선택자 id 속성 값과 매칭되는 element 선택 #idName {} 복합 선택자 선택자명 선택 범위 표현식 하위 선택자 하위 element 선택 (얼마의 깊이가 차이나든 하위에 있다면 모두 선택) E1 E2 {} 자식 선택자 직속 하위 element 선택 (바로 내 밑의 깊이에서만 선택) E1 > E2 {} 인접 형제 선택자 인접 형제 관계인 element 선택 (바로 내 뒤의 형제만 선택) E1 + E2 {} 일반 형제 선택..
