목록Event (7)

Binary World

jQuery 이벤트(event) 02

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657jQueryp { border: 1px solid grey; width: 200px; height: 200px; background-color: lightgreen; font-size: 200%; text-align: center;} $(document).ready(function() { // $('selector').event(function() {}); // 하나의 HTML 요소에 여러개의 event handler를 등록 // $('selector').on({ // event1: function() {}, // ev..
개발자의 길/jQuery 2017. 4. 10. 15:03
jQuery 이벤트(event) 01

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869jQuery jQuery Eventhover // $(document).ready(function() {});$(function() { // mouseover, mouseenter: // 마우스가 해당 영역 위로 올라갔을 때 $('#bulb').mouseover(function() { console.log($(this).attr('src')); $(this).attr('src', 'images/bulb_on.gif'); }); // mouseout, mouseleave: // ..
개발자의 길/jQuery 2017. 4. 10. 14:53
자바스크립트 이벤트(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) 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) 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
자바스크립트 이벤트 처리

- 다양한 이벤트 처리가 가능 12345678910111213141516171819202122232425262728293031323334353637383940JavaScript JavaScript Event Handling var title = document.getElementById('title');var toggle = true; function test1() { if (toggle){ title.innerHTML = '자바스크립트 이벤트 처리'; toggle = false; } else { title.innerHTML = 'JavaScript Event Handling'; toggle = true; }} function test2() { title.style.backgroundColor = 'ho..
개발자의 길/Javascript 2017. 4. 5. 14:16
Prev 1 Next