DOM(Document Object Model) 안의 이벤트 핸들링

브라우저 내부에서는 tree형태로 html의 정보를 저장하는데 이것을 DOM이라고 한다.

자바스크립트에서 이곳을 접근함으로서 HTML요소를 무엇이든 건드릴수 있다.

 

* element2에 document를 넣으면 전 페이지 조회를 한다.

var element = element2 .getElementById(id) : html의 id값을 이용해서 document에서 해당 element를 검색한다.

var elementList = element2 .getElementByTagName(name) : name 태그의 element list를 document에서 조회해서 돌려준다.(복수! 임을 조심)

 

 

* document

 이밴트 

  load : 도큐먼트 안에 모든 데이터가 로드되었을 때 발생되는 이밴트(jquery의 ready가 더 좋음)

 resize : 창 크기가 변경되면 호출

 scroll : 스크롤 이밴트 처리

 unload : 페이지 언로드 호출 메서드(이외의 상황에서 호출이 안되는 경우가 있으니 너무 맹신은 하지 말자...)

 

 * form

 이밴트

 submit : 전송 요청될 때 발생되는 이밴트 -> 폼 데이터 체크 처리

 reset : 폼 초기화할때 발생되는 이벤트

 change : 폼 필드들의 상태가 변경될때 호출되는 이밴트

 focus : 해당 폼이 focus를 잡았을 때 발생되는 이밴트

 blur : 폼이 포커스를 놓쳤을때 발생되는 이밴트

 

* 키보드 이벤트

 - keypress : 키를 누르는 순간 발생되는 이밴트

 - keydown : keypress와 비슷하지만 브라우저마다 조금씩 틀리다(262 페이지 참조)

 - keyup : 키를 때었을때 발생 

 

* element

메서드 

 - e.innerHTML = html... : 해당 element하위에 html요소를 추가한다.

 - var childNodeList = e.childNodes; - 자식노드를 얻는다.

    var text = childNodeList[0].nodeValue;

 

- var element = e.parentNode; : 부모 노드를 얻는다.

- var element = e.nextSibling;  : 다음 형제 노드를 얻는다.(없으면 null)

- var element = e.previousSibling : 이전 형제 노드를 얻는다. (없으면 null)

 

속성

 - e.[속성이름] = value : 해당 속성값을 설정한다.

 - e.src = "이미지경로"; : 이미지 설정

 - e.style.[CSS설정] = value : 해당 CSS 설정을 한다.

 

 

이벤트

 click : 클릭 이벤트

 dbclick : 더블 클릭 이벤트

 mousedown : 마우스 눌렀을때 발생되는 이벤트

 mouseup : 마우스 때었을때 발생되는 이밴트

 mouseover : 마우스 커서가 해당 엘리먼트 위에 들어왔을때 발생

 mouseout : 마우스 커서가 해당 엘리먼트에서 벗어났을때 발생

 mousemove : 마우스 커서가 해당 엘리먼트 위에서 움직일 때 발생 

 

이밴트 활용 방법 : 위 이밴트 명 앞에 on~을 붙이면된다.

ex ) onclick, onkeydown, onfocus .....

[출처] DOM(Document Object Model)|작성자 체스터