삽질 중: JavaScript 선택자(selector) and event 캡쳐링, 버블링(capturing, bubbling)

2013년 12월 16일 월요일

JavaScript 선택자(selector) and event 캡쳐링, 버블링(capturing, bubbling)

이전 블로그에서 이전 함 (원본 글 2013/12/16 작성)

[CSS Selectors]

- 태그 선택자 : tag_name

- 아이디 선택자 : #id_value

- 클래스 선택자 : .class_value

- 공백(자손) 선택자 : parent child, ex) "UL LI" => <ul> <li></li> </ul>

- >자식 선택자 : parent > child

- []속성 선택자 : [attribute=value]

- +인접 선택자

- ~형재 선택자

[JavaScript Selector APIs]

- document.querySelector("selector")

: https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

- document.querySelectorAll("selector")

: https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

- document.getElementByClassName("class_value")

- getElementById("id_value") : 아이디 속성으로 엘리먼트를 찾는다.

: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

  <p id="para1">Some text here</p>

- getElementByTagName("tag_name")

- getElementByName("name_value")

: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName

<form name="up"><input type="text"></form>
<form name="down"><input type="text"></form>

- getElementsByTagNameNS("name_space_uri", "tag_name")

// check the alignment on a number of cells in a table in an XHTML document.
var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");

for (var i = 0; i < cells.length; i++) {
    var axis = cells[i].getAttribute("axis");
    if (axis == "year") {
        // grab the data
    }
}

[Javascript 이벤트 캡쳐링, 버블링]

http://javascript.info/tutorial/bubbling-and-capturing

중첩된 html element들에서 이벤트가 상위, 하위 element로 전달되는 방법을 말하며

- 버블링(Bubbling) : 자식 element에서 발생된 event가 부모 element 순으로 전달되는 현상

- 캡쳐링(Capturing) : 부모 element에서 발생된 event가 자식 element순으로 전달되는 현상

.Sample Code and output

01

<!DOCTYPE HTML>

02

<html>

03

<body>

04

<link type="text/css" rel="stylesheet" href="example.css">

05

06

<div class="d1">1  <!-- the topmost -->

07

    <div class="d2">2

08

        <div class="d3">3 <!-- the innermost -->

09

        </div>

10

    </div>

11

</div>

12

13

</body>

14

</html>

According to this model, the event:

Captures down - through 1 -> 2 -> 3.
Bubbles up - through 3 -> 2 -> 1.

Bugging을 방지하기 위한 코드는 다음과 같다.

The cross-browser-code:

01

element.onclick = function(event) {

02

    event = event || window.event // cross-browser event

03

04

    if (event.stopPropagation) {

05

        // W3C standard variant

06

        event.stopPropagation()

07

    } else {

08

        // IE variant

09

        event.cancelBubble = true

10

    }

11

}

일반적으로 위와 같은 이벤트 연쇄 반응을 방지하고 해당 element에 대해서만 event를 처리하기 위해서는 usercapture를 false로 stopPropagation을 호출하고로 처리한다.

var elem = document.querySelectorAll("div");

for(var i=0; i<elem.length; i++) {

elem[i].addEventListener("click", function(){

console.log(this.getAttribute("class"));

event.stopPropagation();

}, false);

}

삽질 중

2013년 12월 16일 월요일

JavaScript 선택자(selector) and event 캡쳐링, 버블링(capturing, bubbling)

댓글 없음:

댓글 쓰기