jQuery 이벤트

이벤트 처리 

• 엘리먼트에서 특정 이벤트 발생시 실행될 콜백함수를 구현하고, 엘리먼트에 부착시키는 처리이다. 
• 이벤트처리는 사용자와의 상호작용으로 이뤄지며, 엘리먼트안에 있는 이벤트 속성을 이용하는 방법이다. 
• 이벤트를 발생시키는 방법들 
  • function eventHandler(){
    alert("버튼이 클릭되었습니다.");
    }
    • 함수로 설정하고 해당 엘리먼트 객체에 onclick="eventHandler()"이벤트함수에 설정한 함수를 작성하는 방법
  • var btn2 = document.getElementById("btn-2");
    btn2.onclick = eventHandler;
    • btn-2엘리먼트를 찾아서 onclick프로퍼티에 eventHandler함수를 등록한다. 
  • var btn3 = document.getElementById("btn-3");
    btn3.addEventListener("click",eventHandler);
    • btn-3엘리먼트를 찾아서 onclick이벤트 발생시 실행할 함수로 eventHandler함수를 등록한다. 
  • $("#btn-4").on('click',eventHandler);
    • jQuery의 select함수를 이용하여 id가 btn-4인 엘리먼트를 찾고, click이라는 이벤트시 발생할 함수를 등록한다. 
    • 아이디가 btn-4인 엘리먼트인 선택자 함수를 찾고, 엘리먼트에서 click이벤트가 발생시 실행할 함수로 eventHandler를 전달한다. 
  • 그러나 이것은 정의되어있는 함수가 있을 경우에만 사용하는 방법이고, 실제로는 익명함수를 많이 사용한다.
  • event를 매개변수로 두고 event를 전부 전달받을 수 있다. 
  • document.getElementById("btn-2").onclick= function(event){
    alert("2번째 버튼이 클릭되었습니다.");
    };
  • document.getElementById("btn-3").addEventListener("click", function(event){
       alert("3번째 버튼이 클릭되었습니다.");
       });
  • jQuery를 사용하면, 좀 더 깔끔하게 개발이 가능하다.
    • $("#btn-4").on('click',function(event){
         alert("4번째 버튼이 클릭되었습니다.");
         });
• jQuery는 브라우져의 종류에 상관없이 일관된 방식으로 이벤트 처리가 가능하도록 추상화된 이벤트 처리 관련 메소드를 제공한다. 
• jQuery 집합객체의 이벤트 관련 메소드
  • .on('이벤트명',이벤트핸들러함수)
    • 이벤트 핸들러는 등록하는 방법 
    • $("#btn-1").on("click",function(){
        alert("1번 버튼이 클릭되었습니다.");
        })
    • $("#btn-2").click(function(){
        alert("2번 버튼이 클릭되었습니다.");
        })
      • 내부적으로는 .on('click',function(){alert("1번 버튼이 클릭되었습니다.")})와 동일하게 진행된다.
      • 이벤트마다 이벤트명으로 된 편리 메소드를 사용한 것이다.
  • .one()
    • 버튼을 처음 한번 클릭할 때만 실행될 이벤트 핸들러 함수를 등록하기 
    • 딱, 한번만 실행되고 삭제된다. 
    • 새로고침하면 사용할 수 있다. 
    • $("#btn-3").one("click",function(){
        alert("3번 버튼이 클릭되었습니다.");
        });
  • .off()
    • 버튼에 등록된 이벤트 핸들러 함수를 삭제하기 
    • $("#btn-5").click(function(){
      //btn-5를 클릭하면 btn-1에서 해당되는 이벤트를 삭제한다. 
        $("#btn-1").off("click");
        })
  • 위의 모든 이벤트들은 함수를 지정한 것이다. 
  • 함수들은 이벤트가 발생될 때 실행되게 등록하는 함수지, 이벤트가 실행시키는 것이 아니다. 이벤트 발생을 통해서 실행되는 것이다. 
  • trigger()
    • btn-7엘리먼트에서 onclick이벤트를 강제로 발생시키기
    • trigger()메소드는 이벤트를 강제로 발생시키는 것이다. 
    • 바람의**에서 다람쥐를 뿌리는 이벤트처럼 목적으로 사용할 수 있다.
    •   $("#btn-7").trigger("click");

    • 

      해당 엘리먼트에서 특정이벤트가 발생하게 하는 것이다. 
• 콜백함수 
  • 사용자의 개입없이 특정상황이나 특정조건 혹은 특정 이벤트가 발생했을 떄 운영체제, 브라우져, JVM등이 직접실행하는 함수 혹은 메소드를 의미한다. 
  • 즉, 사용자가 실행하는 것이 아니다. 
    • function a(){
          실행문;
          b();          //사용자가 실행된 싯점을 결정한 실행함수 있다. 
          실행문;     //b가 실행될 시점을 개발자가 직접 지정했다.
      };
      a();
      function b(){
      
      };
  • $("#btn-1").click(b);
    • 여기에서 b는 콜백함수다. 
    • b가 실행될 시점을 개발자가 직접 결정하지 못한다. 
      • 언제 실행되냐면 btn-1에서 이벤트가 발생되었을 때 실행된다. 
      • 이벤트가 발생되는 시점을 개발자가 정할 수 없다. 
        • 사용자가 클릭을 할 수 도, 안할수도 있다. 
        • 클릭을 할 수 있지만 언제인지는 정할 수 없다. 
      • 브라우져는 사용자가 클릭시 JVM으로 자동으로 실행되게 한다. 
    • 개발자의 개입은 실행함수를 알려주는 것 뿐이지, 실행시점을 알려주는 것은 아니다. 
    • java에서는 main메소드가 콜백메소드이다. 
    • jsp는 _jspService가 콜백메소드이다. 
      • 우리가 실행하지 않고, 사용자가 해당 페이지를 요청했을 때 실행되게 하고, 언제 요청했는지 알ㅇ 수 없다. 
    • 특정 event가 요청이 왔을 때 만드는 것 까지는 가능하지만, 실행을 내맘대로 할 수없다. 
    • var item = [10, 20, 30];
      item.forEach(function(num, index){
      console.log(num);
      })
      • (function(num, index){
        console.log(num);
        }) 이부분이 콜백함수이다. 
      • item의 갯수만큼 for문을 돌지만, 다른곳에서 실행하고, 개발자는 실행할 메소드만 알려주었다. 100번도 돌수 있다.
  • jQuery event관련 method
    • * click(cb) 엘리먼트를 클릭했을 때 콜백 실행
    • * keyup(cb) 엘리먼트에서 키보드가 다시 올라올 때 콜백 실행(입력필드에 값이 표시)
    • * change(cb) 엘리먼트(select, radio, checkbox)의 값(선택된/체크된 값)이 변할 때 마다 콜백 실행
    • * submit(cb) 폼엘리먼트의 입력값들이 서버로 제출될 때 콜백 실행
    • * scroll(cb) 스크롤바가 움직일 때 마다 콜백 실행
    • * hover(cb1, cb2) mouseenter와 mouseleave를 한 번에 처리하는 메소드
      • 올리면 글이 보이고 마우스를 떠나면 이미지가 보이는 경우 진입과 빠짐이 거의 쌍으로 많이 사용되기 때문에 쌍으로 구현될 수 있는 편리 메소드이다. 
      • 한번에 정의 되었다. 
  • jQuery에서 함수 this는 중요하다.

  • 

    함수를 정의하게 되면 Window객체의 사용자정의객체 내부에 들어가게된다.
    window로 접근하게 된다. 
    fn();로 호출하면 window.fn();으로 호출되고, alert와 console모두 앞은 생략되어있지만, Window가 작성되어 있는 것이다. 
    생략하고 적으면 window안에서 찾고 값을 읽어온다.
  • this에는 일반적으로 메소드를 호출한 객체가 들어가게된다.
    자바에서는 this에는 자기자신이 들어가지만 자바스크립트에서는 메소드를 호출하는 객체가 this로 전달하게 된다. 
    메소드 (this)는 원하는 걸 전달 할 수 있다. 
  • 자바스크립트 함수내에서 this는 일반적으로 그 함수를 호출한 객체다.
  • 하지만, 자바스크립트는 함수안에서 사용되는 this에 임의의 객체를 전달하는 것이 가능하다. 
    event처리할 때 편하게 사용할 수 있다. 

jQuery에서는 이벤트핸들러함수의 this에 이벤트가 발생한 엘리먼트객체가 전달된다.

• this에는 이벤트가 발생한 엘리먼트 객체 (jQeury결과 집합 객체가 아님)가 전달된다. 
• 버튼에 click이벤트를 걸었다.
  • $(".row:eq(1).btn").click(function(){
    console.log(this)
    }
  • this에 이벤트를 발생시킨 객체가 그 버튼에 담겨서 전달된다. 
  • this에 이벤트를 발생시킨 엘리먼트가 무엇인지 알아낼 수 있다. 
  • 일일히 버튼에 id와 onclick을 사용해서 등록해놓을 필요가 없다. 
• this를 바로 사용하지 않고, $(this)로 변경하고 실행하여 jQuery결과 집합객체를 획득한 다음 사용한다. 
  • $(this).prop('disabled', true);

this는 이벤트가 발생한 엘리먼트의 객체이다.
$(this)는 이벤트가 발생한 엘리먼트를 포함하는 jQuery결과 집합 객체이다. 
$(this).parent()는 이벤트가 발생한 엘리먼트의 부모엘리먼트를 포함하는 jQuery결과 집합객체이다. 

$(this).parent().remove()는 이벤트가 발생한 엘리먼트의 부모엘리먼트를 삭제하는 코드이다. 
parent()메소드로 부모엘리먼트의 객체를 반환할 수 있다. 
this.parent().remove()는 존재하지 않는 부분으로, 사용할 수 없다. 

폼 이벤트

• 이벤트 핸들러 함수의 반환 값
• form에 입력된 값이 존재하지 않으면 submit이 되지 않게 만드는 방법
• 
  <form id="form-login" action="login.jsp" method="post">
  <div class="mb-3">
  <label class="form-label">아이디</label>
  <input type="text" class="form-control" name="id"> 
  </div>
  <div class="mb-3">
  <label class="form-label">비밀번호</label>
  <input type="password" class="form-control" name="pwd"> 
  </div>
  <div class="mb-3 text-end">
  <button type="submit" class="btn btn-primary">로그인</button>
  <!-- submit이벤트는 form에서 발생된다. -->
  </div>
  </form>
  
  
  • submit이벤트는 form태그에서 발생된다는 사실을 알고 있어야한다. 
  • <form>태그에서 onsubmit이벤트가 발생하면 폼 입력값이 서버로 제출된다. 
  • jQuery에서는 <form>태그에서 onsubmit이벤트 발생시 실행되는 이벤트 핸들러 함수가 false값을 반환하면 폼입력값이 서버로 제출되지 않는다. 
  • 이벤트 핸들러함수가 false값을 반환하면 <form>태그에서 onsubmit이벤트 발생했을 때 서버로 폼입력값을 제출하는 기본동작이 실행되지 않는다. 
  • 즉, 이벤트핸들러 함수가 false값을 반환하면 해당 엘리먼트에서 특정이벤트 발생시 자동으로 실행되는 기본동작의 실행을 중지시킬 수 있다. 
  • 대상 엘리먼트는 <a>, <form>태그이다.
    • a태그에서는 onclick이벤트가 발생하면 지정된 링크로 이동하는 기본동작이 발생하는 데, 이 기본동작을 제어할 수 있다. 
    • form태그에서는 onsubmit이벤트가 발생하면 서버로 폼입력을 제출하는 기본동작이 실행되는데, 이 기본동작을 제어할 수 있다. 
    • a태그와 form태그 외에는 사용할 일이 없다. 
    • 버튼에 이벤트를 거는 것이 아닌 form태그에 이벤트를 걸어야한다. 
  • $("#form-login").submit(function(){
    //form태그에 걸린 id에서 onsubmit에 대한 편리메소드를 실행하면 실행되는 함수이다.
      var userId = $("input[name=id]").val();
    //input의 속성id가 name의 속성값을 변수 userId에 입력한다.
      if(userId == ""){
    //만약 userId 가 빈문자열이라면
      alert("아이디는 필수 입력값입니다.");
    //경고창메세지를 출력한다.
      return false;
    //그리고 중지시킨다 -->submit은 true여야 통과된다.
      }
      var userPwd = $("input[name=pwd]").val();
    //input의 name이 pwd의 속성값을 변수 userPwd에 저장한다.
      if(userPwd == ""){
    //만약 userPwd가 빈문자열이라면
      alert("비밀번호는 필수 입력값입니다.");
    //경고창 메세지를 출력한다.
      return false;
    //그리고 중지시킨다
      }
     
      return true;
    //둘다 빈칸이 아니라면 submit메소드가 실행된다.
  • submit이라는 이벤트가 발생될 때 이벤트 핸들러 함수가 발생되게 한다.
  • 이벤트 핸들러 함수가 return값이 true면 제출, false면 제출되지 않게 한다. 
  •  

현재 존재하지 않는 엘리먼트에 이벤트 핸들러 등록하기

• <div class="card">
  <div class="card-header">
  <h4>입력폼<button class="btn btn-outline-primary btn-sm float-end" id="btn-add-field">추가</button></h4>
  <!-- 이버튼을 클릭했을 때 추가가되기 위해서 id를 부여함 -->
  </div>
  <div class="card-body">
  <div class="mb-3">
  <label class="form-label">이름</label>
  <input type="text" class="form-control"/>
  </div>
  <div class="mb-3">
  <label class="form-label">경력사항</label>
  <div class="d-flex justify-content-between">
  <input type="text" class="form-control w-75"/>
  <!-- 첫번째꺼에는 삭제가 없이 작성함 -->
  </div>
  </div>
  <div class="mb-3">
  <div class="d-flex justify-content-between">
  <input type="text" class="form-control w-75"/>
  <button class="btn btn-outline-danger btn-sm">삭제</button>
  </div>
  </div>
  <!-- 새 경력사항이 추가될 곳, 이 위치를 찾아야한다. 맨 마지막 mb-3 뒤에 들어가야한다.-->
  </div>
  </div>
• on사용방법은 2가지가 존재한다. 
  • $(selector).on('이벤트명', 콜백함수)
    • 선택된 엘리먼트에서 지정한 이벤트가 발생할 때마다 콜백함수가 실행된다. 
  • $(container).on('이벤트명', selector, 콜백함수)
    • container로 지정된 엘리먼트안에 selector로 검색되는 현재 존재하거나 미래에 추가될 엘리먼트에서 지정한 이벤트가 발생할 때마다 콜백함수가 실행된다. 
    • container : 이벤트 처리 대상이 되는 엘리먼트를 후손으로 가지는 엘리먼트 
    • selector : 이벤트 처리 대상이 되는 엘리먼트
• id가 btn-add-field 엘리먼트를 클릭했을 때 실행되는 이벤트 핸들러 함수를 정의하기 
  • id를 정의할 때!!! 팁!!!! id가 뭔지 들어내는 id로 정의하는 것이 좋다. 
  • id = element(버튼) - action(추가) -what(필드)
  • id = btn-add-field = 버튼은 필드를 추가하는구나~ 
• $("btn-add-field").click(function(){
      var template = `
  <div class=" mb-3 d-flex justify-content-between">
  <input type="text" class="form-control w-75"/>
  <button class="btn btn-outline-danger btn-sm">삭제</button>
  </div>`;//1옆에 있는 `것, 2줄이상 되는 부분은 ``으로 감싸주고, 클릭되면 복사가 될 부분을 입력해준다. 
  
  //class가 card-body인 엘리먼트안에 있는 클래스가 .mb-3인 엘리먼트 중에서 맨 마지막번째 엘리먼트를 선택하기 --->추가를 누르면 추가 될 위치.
  $(".card-body .mb-3:last").after(template);//뒤에 넣는것 after, 앞에 넣는것 before
  //클래스가 card-body인 후손 클래스가 mb-3인데 제일 마지막 뒤에 입력한다 변수 template를
  })
• 삭제버튼에 이벤트 추가하기 
  •   $(".card-body .btn-outline-danger").click(function(){  //기존에 존재하는 이벤트
       alert("삭제");
      })
  • 새롭게 추가되는 부분에 이벤트 추가하기 (지금 존재하지 않는 이벤트를 삭제할 이벤트 ! --> 위에서 사용하는 삭제 버튼은 이미 만들어진 삭제버튼밖에 이벤트를 추가하는 것이다. )
    • card-body안에서 생성될 예정이다. card-body내부에서 만들어 지기 때문에 container이다. container은 꼭 존재해야한다. 
    • $(컨테이너 엘리먼트를 선택하는 선택자).on('이벤트명','이벤트를 발생시키는 엘리먼트를 선택하는 선택자',이벤트핸들러함수)
      • 컨테이너 엘리먼트를 선택하는 선택자
        • 새로엘리먼트가 추가되는 부모엘리먼트를 선택하는 선택자를 정의한다. 
        • '.card-body'는 경력사항입력필드와 삭제버튼이 추가되는 곳이다. 
      • 처리대상 이벤트 명 
        • 이벤트명을 지정한다. 
      • 이벤트를 발생시키는 엘리먼트를 선택하는 선택자 
        • 이벤트를 발생시키는 엘리먼트를 선택하는 선택자를 정의한다. 
        • '.btn-outline-danger'버튼을 클릭했을 때 이벤트 핸들러함수가 실행된다. 
      • 이벤트 핸들러 함수
        • '.btn-outline-danger'버튼을 클릭했을 때 실행되는 이벤트 핸들러 함수이다.
    • $('.card-body').on('click','.btn-outline-danger',function(){
      //card-body안에 btn-outline-danger가 새롭게 정의될 텐데, click하면 실행될 이벤트 함수 
         $(this).closest('.mb-3').remove();
      })
      • 버튼을 누르면 부모의 부모가 삭제되어야한다. 
      • $(this)이벤트의 jQuery객체 parent() : 부모, parents(엘리먼트) : 무조건조상이다. 
      • parents에서 조장을 찾으면 전체 row mb-3이 날아가서 전체가 삭제된다. 
      • closest('엘리먼트'): 제일가까운 조상을 찾는다. 
      • parent()아니면 closest() 둘중에 하나만 사용해야한다.