Binary World

- Event Capturing: 이벤트 처리 순서가 부모 요소 -> 자식 요소- Event Bubbling: 이벤트 처리 순서가 자식 요소 -> 부모 요소 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253JavaScriptdiv { border: 1px solid grey; padding: 20px;}p { border: 1px dotted red;} Event Capturing/Bubbling Event Capturing: 부모 -> 자식 Event Bubbling: 자식 -> 부모 var div1 = document.getElementById('div1');var p1 = d..

* 이벤트 핸들러 등록 방법1:- element.event = function() {}; * 이벤트 핸들러 등록 방법 2:- element.addEventListener(event, function, useCaption);- event: 이벤트 이름(click, mouseover, ...)- function: 이벤트 핸들러(리스너) -> 필수- useCaption: true/false -> 선택(기본값은 false)- 장점: 하나의 이벤트에 여러개의 이벤트 핸들러를 등록할 수 있음 123456789101112131415161718192021222324252627282930313233343536373839JavaScript 자바스크립트에서 이벤트 핸들러 등록 방법버튼 1 var output = docume..

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758JavaScript#para { border: 1px solid grey; width: 200px; height: 100px; font-size: 2em; text-align: center;} HTML 마우스 이벤트마우스를 올려 보세요...... // onmouseover: 마우스 커서가 영역 위로 올라왔을 때// -> 배경색 바꿈. "마우스를 눌러주세요..." 라고 변경function mouseOver(para) { para.style.backgroundColor = 'lightpink'; para.innerHTM..

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263JavaScript HTML event 빨강 녹색 파랑 // onfocus: 포커스를 받았을 때// -> 입력상자(input)의 배경색을 바꿈function changeBgColor(input){ input.style.backgroundColor = 'lightyellow';} // onblur: 포커스를 잃었을 때// -> 입력상자(input)의 배경색을 원래대로 바꿈function resetBgColor(input){ input.style.backgroundColor = 'white';} // ..

* button 태그의 type 속성:1. button: 클릭할 수 있는 버튼2. submit: form의 데이터들을 서버로 전송(type 속성의 기본값!)3. reset: form의 입력된 데이터들을 리셋(지움) 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394JavaScripth1{ background-color: pink; color: white; font-size: 2.5em; /* 250% */ text-align: center..

1. HTML 태그안에서 이벤트 속성(attribute)에 이벤트 처리 코드를 직접 작성2. HTML 태그의 이벤트 속성에 함수를 설정하고, script에서 함수를 구현3. script 안에서 이벤트 리스너(핸들러)를 등록 12345678910111213141516171819202122232425262728293031323334353637383940JavaScript JavaScript를 사용한 HTML 이벤트 처리 onclick 이벤트에서 코드를 직접 작성다이얼로그(pop-up) 띄우기onclick 속성에서 JS 함수 호출script에서 이벤트 리스너를 등록 function change(para){ // var para = document.getElementById('para'); // content ..

* JavaScript를 사용해서 HTML element를 찾는 방법: 1. getElementById('id') 2. getElementsByTagName('tagName') 3. getElemnetsByClassName('className') 4. CSS 선택자: querySelectorAll('선택자'), querySelector('선택자') 5. HTML object collection : body, form, images, anchors, ... 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051JavaScript#p1 { border: 1px solid grey;} HTML 요소..

123456789101112131415161718192021222324252627282930313233343536373839404142JavaScript DOM(Document Object Model)여기는 단락입니다. var output = document.getElementById('output');var para = document.getElementById('para1');output.innerHTML += 'tagName: ' + para.tagName + ' ';output.innerHTML += 'parentElement: ' + para.parentElement + ' ';output.innerHTML += 'children: ' + para.children + ' ';output.inne..