js Event

웹 페이지에서 사용자의 어떠한 행위가 발생한 것

이벤트 속성과 이벤트 핸들러를 활용

설정방법

1. 고전 이벤트 모델
2. 인라인 이벤트 모델
3. 표준 이벤트 모델
4. 마이크로소프트 인터넷 익스플로러 이벤트 모델 (사용X)

고전이벤트 모델

btn1.onclick = function(){}

함수 안에서 변수 대신 this를 사용할 수 있다

인라인 이벤트 모델

요소 내부에 이벤트를 작성하고 script 태그에 있는 함수를 호출하는 방식

표준 이벤트 모델

W3C 에서 공식적으로 지정한 모델

한 번에 여러 이벤트 핸들러 설정 가능

const 변수명 = document.querySelector("선택자")
변수명.addEventListener("click", function(){})

jS jQ Event 비교

1. 인라인 이벤트

   <button onclick="func1();">인라인이벤트</button>

   // 자바스크립트 방식
   function func1(){
       console.log("인라인이벤트 모델");
   }

2. 고전 이벤트

   $.이벤트명(function(){}) $(선택자)로 표현 가능하기 때문에 바로 사용하기 용이하다

   // 자바스크립트 방식
   btn1.onclick = function(){
       console.log("고전이벤트 모델");
   }
   

3. on / off

   $(선택자).on("이벤트이름", (function(){});

   // 자바스크립트 방식
   btn1.addEventListener("click", function(){
       console.log("표준이벤트 모델");
   })

jQuery on / off event

일괄적용 가능하다

예외를 주고 싶다면 index를 이용할 수 있다

왕중요 >> $(document).on(이벤트, 이벤트적용태그, function(){})

const d1 = $(".d1");
// d1클래스를 가진 div 4개를 가져온다
// selectAll 처럼 같은 클래스를 가진 요소를 배열로 가져온다

d1.on("click", function(){
    const divs = $(".d1");
    const index = divs.index(this);
    console.log(this.text());
    console.log(index);
})
// 새로 발생한 d1 div에게 이벤트 걸어주고 싶지 않으면, 지엽적으로 걸어주면 된다

$(document).on("click", ".d1", function(){
    const divs = $(".d1");
    const index = divs.index(this);
    console.log($(this).text());
    console.log(index);
})
// 새로 생긴 애들한테도 같은 이벤트를 걸어줄 거면, 문서 전체에 대해서 걸어주면 된다
// 문서 전체를 선택자로 지정. 문서 중 d1을 가진 태그에 event 발생시키는 함수

$("#btn1").on("click", function(){
    const newDiv = $("<div>test-4</div>");
    newDiv.addClass("d1");
    $("#test1").append(newDiv);
})
// 버튼을 클릭하면 div를 추가하여 div를 감싼 test에 추가하는 event

trigger / 만들어진 함수.click()

$("#allLevelup").on("click", function(){
    const countSpan = $(".levelup br").prev();
    levelupBtn.trigger("click"); // 트리거
    // leverupBtn.click(); 직관적인 방법
})

event의 index 사용법

this가 있을 때 사용할 수 있다

<div id="div-wrap">
  <div class="d1">1</div>
  <div class="d1">2</div>
  <div class="d1">3</div>
  <div class="d1">4</div>
</div>

예를 들어 div-warp이 감싸고 있는 4개의 div가 있다고 가정했을 때,

$(".d1").on("click", function(){
	const index = $(".d1").index(this);
  	//   $(".d1") : 인덱스를 조회할 범위
  	//	.index(this) : this는 클릭한 div
  	console.log(index);
})

d1 클래스를 가진 div중 1개에 클릭이 되었을 때 이벤트가 발생한다

클릭된 div가 $(".d1")의 범위 중 몇 번째 인덱스에 존재하는지 리턴한다

마우스 이벤트

click | dblclick | mousedown | mouseup | mousemove | mouseout | mouseenter | mouseleave | mouseover | scroll

$("#click").on("click", function(){
    $(this).css("color","red");
})
$("#dblclick").on("dblclick", function(){
    $(this).css("color","blue");
})
$("#mousedown").on("mousedown", function(){
    $(this).css("color", "red");
})
$("#mousedown").on("mouseup", function(){
    $(this).css("color", "blue");
}) //up이벤트 주지 않으면 다운된 채로 바뀌지 않음

$(document).on("mousemove",function(event){ //(e) 키코드 정보볼 때 썼던 매개변수
    const html = "x좌표 : "+event.pageX+", y좌표 : "+event.pageY;
    $("#mousemove").text(html);
})

인풋 이벤트

$("#input1").on("focusin", function(){
    $(this).css("background-color","skyblue");
})
$("#input1").on("focusout", function(){
    $(this).css("background-color","transparent");
}) // out이벤트 주지 않으면 in으로 넣어준 컬러 그대로 적용

$("#input2").on("change", function(){
    console.log("input2 변경값 : "+$(this).val());
}) // 입력창에서 나갔을 때 직전 입력값과 다르면 동작

$("#submit").on("click", function(event){
    const input1 = $("#input1");
    if(input1.val()==""){
        event.preventDefault();
        // 기본이벤트 제거
        // 제출 안 됨
        input1.focus();
    }
})

effect

페이지에 애니메이션 효과를 만들기 위한 메서드 집합

$.메서드명([speed | easing | callbak]);

speed : 실행속도 (ms단위)

callback : 효과 메서드 수행 후 수행할 함수 저장 (모든 진행 끝난 후 실행)

easing : 변경되는 지점별 속도

show() | hide() | toggle()

화면에 요소를 띄우고 지우는 효과

라인에 display : none이 들어갔다가 style이 적용되는 방식

const div = $("#div"); // 효과가 적용될 div
$("#btn1").on("click", function(){
    div.show(500);
})
$("#btn2").on("click", function(){
    div.hide(500);
})
$("#btn3").on("click", function(){
    div.toggle(3*1000);
})

slideDown() | slideUp() | slideToggle()

요소가 위 아래로 접었다가 사라지는 효과

slideDown, slideUp, slideToggle은 기본적으로 0.4초의 시간이 걸려 있다

$("#btn4").on("click", function(){
    div.slideDown();
})
$("#btn5").on("click", function(){
    div.slideUp();
})
$("#btn6").on("click", function(){
    div.slideToggle();
})

fadeIn() | fadeOut() | fadeToggle()

요소가 화면에서 서서히 사라졌다 나타나는 효과

$("#btn7").on("click", function(){
    div.fadeIn(2000);
})
$("#btn8").on("click", function(){
    div.fadeOut();
})
$("#btn9").on("click", function(){
    div.fadeToggle();
})

animate()

$선택자.animate({변경할 css 속성},[speed], [easing], [callback])

단, easing을 사용하기 위해서는 jQuery-ui 사용해야 한다

jQuery-ui를 사용하면 더 많은 속성을 적용할 수 있다

$("#btn10").on("click", function(){
    div.animate(
        {
            "width" : "100px",
            "height" : "50px",
            "opacity" : "0.2",
            "background-color" : "red	// 적용되지 않는다
       },
       3*1000	// speed
    )
})