목록2017/04/07 (6)

Binary World

자바스크립트 이벤트(Event) 06

- 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..
개발자의 길/Javascript 2017. 4. 7. 16:54
자바스크립트 이벤트(Event) 05

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

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..
개발자의 길/Javascript 2017. 4. 7. 15:08
자바스크립트 이벤트(Event) 03

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263JavaScript HTML event 빨강 녹색 파랑 // onfocus: 포커스를 받았을 때// -> 입력상자(input)의 배경색을 바꿈function changeBgColor(input){ input.style.backgroundColor = 'lightyellow';} // onblur: 포커스를 잃었을 때// -> 입력상자(input)의 배경색을 원래대로 바꿈function resetBgColor(input){ input.style.backgroundColor = 'white';} // ..
개발자의 길/Javascript 2017. 4. 7. 15:04
자바스크립트 이벤트(Event) 02

* 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..
개발자의 길/Javascript 2017. 4. 7. 13:40
자바스크립트 이벤트(Event) 01

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 2017. 4. 7. 11:06
Prev 1 Next