가카리의 공부방

DOM LEVEL2 이벤트 모델에서는 DOM LEVEL0이벤트에서와는 달리 여러 번 이벤트를 추가가 가능하다는 점입니다. 인터넷 익스플로러에서는 attachEvent 로 이벤트를 추가하고 detachEvent로 이벤트를 삭제하고 그 외 브라우저에서는 addEventListener로 이벤트를 추가하고 removeEventListener로 이벤트를 삭제합니다. 예제 소스 DOCTYPE html> Insert title here window.onload = function(){ var header = document.getElementById('my-header'); if(header.attachEvent){ //인터넷 익스플로러 일 경우 실행 var handler = function(){ window.eve..

이벤트 버블링이란 이벤트가 자식부터 부모까지 계속 실행되는 것을 말한다. DOCTYPE html> Insert title here window.onload = function(){ } * {border: 3px solid black;} Pagagraph 위와 같은 소스의 경우 pagagraph 다음 header 다음 inner-div 다음 outer-div 순으로 실행이 될 것이다. 만약 이벤트 버블링을 막고 싶다면? 다음과 같이 인터넷 익스플로러 : 이벤트 객체의 cancelBubble 속성을 true로 바꿈 그 외 브라우저 : 이벤트 객체의 stopPropagation() 메서드를 사용 으로 막습니다. DOCTYPE html> Insert title here window.onload = functio..

문서 객체 모델(DOM, Document Object Model)은 document 객체와 관련된 객체의 집합입니다. 문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가 수정 제거 할 수 있습니다. 다음은 이 문서 객체 모델을 이용한 글자들의 움직임을 만든 예제입니다. DOCTYPE html> Insert title here //랜덤한 정수를 생성 function nextRandomInteger(limit){ return Math.round(Math.random() * limit); } //랜덤한 알파벳을 리턴 var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; function randomAlphabet(){ return alphabet.charAt(nextRandomI..

문서 객체 모델(DOM, Document Object Model)은 document 객체와 관련된 객체의 집합입니다. 문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가 수정 제거 할 수 있습니다. 다음은 간단히 document 객체를 활용한 회전하는 글자라는 예제입니다. DOCTYPE html> Insert title here window.onload = function(){ //변수 선언 및 문서 객체를 가져오기 //이때 ID로 가져온다 var sun = document.getElementById('sun'); var earth = document.getElementById('earth'); var moon = document.getElementById('moon'); //문서 객체의 스타일 속..