JQuery [ Click, eq, Trigger( event ) ]

Click

• 마우스로 클릭하는 경우

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

---

Eq

선택자.eq(index값) : 선택자(유사배열) 중 index 값에 해당하는 선택자를 얻어오는 것

• $("선택자").eq(index) =>
• $("선택자")[index] => X
• document.querySelector("선택자")[index] => O

---

Each 문 과 Eq

• 연속 클릭하였을 경우 이전 클릭 원복하는 방법 두가지

1. Each문 이용

$("선택자").click(e => {
	const i = $("선택자").index($(e.target));
  	$("선택자").each(function(index, elmt){
      	if(index == i){
        	$(elmt).css({"background-color":"green"});
        }
      	else{
        	$(elmt).css({"background-color":""});
        }	// end of if~else-----
    }	// end of $("선택자").each(function(index, elmt)-------
})	// end of $("선택자").click(e => {})-------------------------

2. Eq 이용

$("선택자").click(e => {
	const i = $("선택자").index($(e.target));
	for(let index=0; index<배열명.length; index++){
    	if(index == i){
        	$("선택자").eq(index).css({"background-color":"green"});
          	// 또는
          	document.querySelector("선택자")[index]
              					.css({"background-color":"green"});
        }
      	else{
        	$("선택자").eq(index).css({"background-color":""});
          	// 또는
          	document.querySelector("선택자")[index]
              					.css({"background-color":""});
        }	// end of if~else-------
    }	// end of for---------------------
})	// end of $("선택자").click(e => {})-----------------

---

Trigger(event) + eq

• 주의사항
  => event 실행시 메소드에 ' e (event) ' 를 반드시 적어주어야 한다.

// === 기본 처음 이미지 설정 === //
$("선택자").eq(0).trigger('click');

---

정리

• 01_eventHandling -> chap05_mouseover_mouseout_hover
  -> 04.click_eq_trigger.html, 04.js, 04.css