javascript, jquery
● 속성 찾기
<div id="panel" title="test" data-testingAttribute="test12112221313">TEST</div>
console.log($('div').attr('title'));
//속성 변경
console.log($('div').attr('title', '99999'));
//'data-' 형식으로 시작하는 속성인 경우 jquery에서 지원하는 .data()를 사용
console.log($('div').data('testingAttribute'));
console.log($('div').data('testingAttribute', '112223333444445555666677778888999999000000'));
==========================================================
◎ 이벤트
◎ event
- mouseEvent
클릭 발생시 MouseEvent 객체 생성
클릭한 마우스 버튼 정보
- keyboardEvent
- 태그요소 고유이벤트
img : load되었는지의 여부 load
input : 입력한 정보가 바뀌는지의 여부 change
- 사용자 정의 이벤트
※ jQuery에 동적 태그 추가시 liveEvent로 등록하여야 한다.
==========================================================
◎ 이벤트 단계
1. 캡쳐(capture) 단계
document부터 시작하여 실제 이벤트 발생시킨 노드의 바로전까지의 흐름
eg) 캡쳐단계에서 이벤트를 막을 때 사용 : e.stopPropagation();
2. 타겟(target) 단계
이벤트를 발생시킨 노드에 머무르는 단계
이벤트가 등록되어 있다면 리스너 실행
3. 버블(bubble) 단계
캡쳐단계의 역순으로 흐르는 단계 (흐름 = 버블링)
모든이벤트가 버블링이 발생하지 않는다.
버블링 도중 멈출 수 있다.
==========================================================
◎ 버블링 이벤트
버블링 가능 여부 버블링 취소 가능 여부
load X X
click O O
mousedown O O
mouseover O O
mousemove O X
blur X X
change O X
resize O X
scroll O X
focus X X
==========================================================
이벤트 목록
● blur : focus에서 빠져나오는 지점에 발생
● change : 대상 태그 내부에서 focus된 상태에 값의 변경이 일어나는 경우
● resize : 대상 window창의 크기 값의 변경이 일어나는 경우(크기변경 메소드 : .resizeTo())
● select : 대상 text가 드래그를 통해 선택된 경우
● click : 대상 태그 영역에서 click이 일어난 경우
● dbclick : 대상 태그 영역에서 double click이 일어난 경우
● keydown : 키보드 키가 눌린 순간
● keypress : 키보드 키가 눌려진 상태
● keyup : 키보드 키를 뗀 순간