JQuery [ Mouseover, Mouseout, 속성명 파악 ( attr, prop, index ) ]

Mouseover

• 마우스를 올리는 경우

$("선택자").mouseover(e => {
	...
})
// 또는
$("선택자").mouseover(function(e){
	...
})
// 또는
$("선택자").bind('mouseover', function(e){
	...
}

---

Mouseout

• 마우스가 벗어난 순간

$("선택자").mouseout(e => {
	...
})
// 또는
$("선택자").mouseout(function(e){
	...
})
// 또는
$("선택자").bind('mouseout', function(e){
	...
}

---

Mouseover 와 Mouseout 한번에 사용

• forEach : 배열의 데이터
• each : 노드리스트

$("선택자").each(function(i, elt){	// i : index, elt : elmt
	$(elt).mouseover(function(){
    // elt = e.target 이므로 function 안에 e 를 적지 않아도 된다.
    	...
    }
    $(elt).mouseout(function(){
    // elt = e.target 이므로 function 안에 e 를 적지 않아도 된다.
    	...
    }
})	// end of $("선택자").each(function(i, elt){}-----------------

---

선택자의 속성명 파악

1. prop 와 attr 이용

prop() 와 attr() 이용 차이

prop()

-> form 태그 내에 사용되어지는 엘리먼트의 disabled, selected, checked 의 속성값 확인 또는 변경하는 경우

attr()

-> 그 나머지 엘리먼트의 속성값 확인 또는 변경하는 경우

// === 타겟의 이름 알아오기 === //
$(e.target).text()

// === 선택자의 class 명 알아오기 === //
$("선택자").attr('class')
$("선택자").prop('class')

// === 선택자의 id 명 알아오기 === //
$("선택자").attr('id')
$("선택자").prop('id')

// === 선택자의 name 명 알아오기 === //
$("선택자").attr('name')
$("선택자").prop('name')

---

2. Index 이용 ( ★ 중요 ★ )

• id 속성이 아닌 index 값 이용
• $("복수개의선택자").index("선택자")

$("div#container > span.buttons").index($(e.target));
// e.target 은 버튼 중 하나의 이벤트 발생 구역
// 이것의 결과값 : 복수개의 선택자 중 선택자 이벤트 발생 위치(index)

---

정리

• 01_eventHandling -> chap05_mouseover_mouseout_hover
  -> 01_mouseover_mouseout_attr_prop.html, 01.js, 01.css, 02_mouseover_mouseout_attr_prop_each.html, 02.js, 02.css, 03_mouseover_mouseout_index.html, 03.js, 03.css