jQuery 썸네일형 리스트형 04-2.이벤트 모델 jQuery 이벤트 모델 특징) - 이벤트 핸들러를 할당할 수 있는 통합 메서드를 제공. - 엘리먼트의 이벤트 타입마다 여러 핸들러를 할당할 수 있다. - click, mouseover 같은 표준 이벤트 타입명을 사용. - 핸들러의 매개변수를 써서 Event 인스턴스를 사용할 수 있다. - 자주 사용하는 Event 인스턴스의 프로퍼티들에 일관된 이름을 사용. - 이벤트 해제와 기본 행동을 막는 통합 메서드를 제공. - 캡처 단계를 지원하지 못함 - 하나의 API로 표준 호환 브라우저와 인터넷 익스플로러를 모두 지원. [ jQuery를 사용해 이벤트 핸들러 바인딩 ] bind(eventType, data, listener) - 일치된 집합에 있는 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를.. 더보기 04-1.브라우저 이벤트 모델 브라우저 이벤트 모델 ▶ DOM 레벨 0 이벤트 모델 ◀ [ Event 인스턴스 ] 대부분의 브라우저에서 이벤트 핸들러가 실행될 때 Event 클래스의 인스턴스가 첫 번째 매개변수로 전달. 인터넷 익스플로러는 window의 event 프로퍼티에 Event 인스턴스를 저장. 이 차이점을 해결하려고 다음과 같은 코드를 사용한다. if (!event) event = window.event; 표준 브라우저의 경우 target 프로퍼티를 참조하지만 인터넷 익스플로러의 경우 srcElement 프로퍼티를 참조하므로 다음과 같은 코드를 사용하여 해결한다. var target = (event.target) ? event.target : event.srcElement; [ 이벤트 버블링 ] 대상이 된 엘리먼트가 이벤트를.. 더보기 03-3.엘리먼트 콘텐츠 설정 엘리먼트 콘텐츠 설정 [ HTML과 텍스트 콘텐츠 대체 ] html() - 일치하는 집합에서 첫 번째 엘리먼트의 HTML 콘텐츠를 가져온다. html(text) - 전달된 HTML 코드를 모든 일치하는 엘리먼트의 콘텐츠로 설정. text() - 확장 엘리먼트의 모든 텍스트 콘텐츠를 결합하여 커맨드의 결과로 반환. - 반환값 : 결합된 문자열 예제) 하나 둘 셋 넷 var text = $('#theList').text(); 설명) text변수에 '하나둘셋넷'이 설정된다. text(content) - 모든 확장 엘리먼트의 텍스트 콘텐츠를 전달된 값으로 설정. - content : (String) 설정할 텍스트가 ''을 포함한다면, 그 문자는 HTML 엔티티로 대체. [ 엘리먼트 복사 / 이동 ] append.. 더보기 03-2.엘리먼트 스타일 변경 엘리먼트 스타일 변경 [ 클래스 추가 / 제거 ] addClass(names) - 매개변수로 전달된 하나 이상 되는 클래스명을 확장 집합의 모든 엘리먼트에 추가. - names : (String) 클래스명을 포함하는 문자열. 여러 클래스명을 추가할 때는 공백으로 구분. removeClass(names) - 매개변수로 전달된 하나 이상되는 클래스명을 확장 집합에 있는 모든 엘리먼트에서 제거. - names : (String) 다수의 클래스명을 제거하는 경우 공백으로 구분. toggleClass(name) - 매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고, 존재한다면 제거한다. [ 스타일 얻고 설정하기 ] css(name, value) - 일치하는 각 엘리먼트에 name 매게변수의 CSS .. 더보기 03-1.엘리먼트 프로퍼티와 어트리뷰트 조작 엘리먼트 프로퍼티와 어트리뷰트 조작 [ 엘리먼트 프로퍼티 조작 ] each(iterator) - 일치하는 집합을 순회하면서 전달된 반복자 함수를 엘리먼트마다 호출 예제1) $('img').each(function(n){ this.alt='아이디가 ' + this.id + '인 image[' + n + ']이다.'; }); 설명1) 페이지에 있는 모든 이미지 엘리먼트마다 인라인(inline) 함수를 호출하여, 엘리먼트의 순서와 id를 사용하여 만든 문자열로 alt 프로퍼티를 변경. 예제2) var allAlts = new Array(); $('img').each(function(){ allAlts.push(this.alt); }); 설명2) alt 프로퍼티의 모든 값을 배열로 가져온다. 예제3) var a.. 더보기 이전 1 2 다음