Jquery - 이벤트

 

1. 이벤트 생성 : on()함수를 이용해서 이벤트를 등록한다

<div id="container">
        <ul>
            <li>html</li>
            <li>css</li>
            <li>javascript</li>
            <li>jqeury</li>
        </ul>
        <p>p태그 이벤트</p>
        <h3>h3이벤트</h3>
</div>

<script>
        $(()=>{
            $("#container>ul>li").on("click",function(e){
                console.log($(e.target).text());
            })

            //이벤트를 설정할 때 이벤트 객체에 데이터 저장하기
            $("#container>ul>li").on("click",{count:0},(e)=>{
            e.data.count+=1;
            console.log(e.data);
            })

            // $("#container>ul>li")[0].addEventListener("dblclick",e=>{
            //     console.log($(e.target).prev());
            // })

            //한 번에 여러 이벤트 적용하기
            $("#container>h3").on({
                //"click":e=>{alert("마우스 올라옴")},
                "mouseenter":e=>{$(e.target).css("backgroundColor","red")},
                "mouseleave":e=>{$(e.target).css("backgroundColor","white")},
                "dblclick":e=>{$(e.target).css("fontSize","50px")}
            })
        });

</script>

 

 

 

2. 이벤트 설정

 

① 한 번만 실행되는 이벤트 설정

<button id="btn">한 번만 실행되는 버튼 : one</button> 

<script>
  $("#btn").one("click",e=>{
          alert("버튼눌렸다!");
  })
</script>

 

 

② 이벤트 속성명으로 이벤트 설정

<div id="eventTarget">
  <form action="">
     <input type="text" name="title" id="title"> <br>
    
     <select name="type" id="type"> 
       <option value="notice">공지</option>
       <option value="free">자유</option>
       <option value="secret">비밀</option>
     </select><br>
     
     <textarea name="content" id="content" cols="30" rows="10"></textarea>
     
     <br>
     
     <span style="font-size: 20px;font-weight: bolder;"></span>
     
     <br>     
     
     <input type="password" id="password"><br>
     <input type="password" id="passwoedck"><br>
     
  </form>
</div>

<script>
     $(function(){
            //레디 함수
            $("#eventTarget>form>input#title").focus(function(e){ //포커스 이벤트를 주는것
                $(e.target).css({"backgroundColor":"green","color":"yellow"})
            });

            $("#eventTarget>form>select#type").change(e=>{
                alert($(e.target).val());
            })

            $("#eventTarget>form>textarea#content").keyup(e=>{
                const strVal=$(e.target).val();
                $(e.target).next().next().text(`${strVal.length}/100`).css("color","gray");
            })
    })
</script>

 

 

③ hover 이용하기

<img id="imgTarget" src="https://item.kakaocdn.net/do/494ea37cf81a6a1efb5dfab1783ab487616b58f7bf017e58d417ccb3283deeb3" alt="" width="200" height="200">
    
<script>
 //https://item.kakaocdn.net/do/494ea37cf81a6a1efb5dfab1783ab487616b58f7bf017e58d417ccb3283deeb3
 //https://item.kakaocdn.net/do/494ea37cf81a6a1efb5dfab1783ab4878f324a0b9c48f77dbce3a43bd11ce785

  //mouseenter, mouseleave를 동시에 지정한 것
  
      $(function(){

          $("img#imgTarget").hover(e=>{
              $(e.target).attr("src","https://item.kakaocdn.net/do/494ea37cf81a6a1efb5dfab1783ab487616b58f7bf017e58d417ccb3283deeb3");
          },
          e=>{
              $(e.target).attr("src","https://item.kakaocdn.net/do/494ea37cf81a6a1efb5dfab1783ab4878f324a0b9c48f77dbce3a43bd11ce785");
          });


          $("#hoverUse").hover(
              function(e){ // 마우스 enter했을때
              $(e.target).css("fontSize","26px");
              },
     
              function(e){ //마우스가 나갈을 때
              $(e.target).css("fontSize","16px");
              }
         );
    });
</script>

 

 

 

3. 이벤트 삭제

<button id="eventOff">버튼</button>
<script>
   $(function(){
        let count = 0;
        $("#eventOff").click(e=>{
           console.log("실행")
           if(count++<5){
                    alert("버튼클릭!")
           }else{
                $(e.target).off("click");
           }
        })
   })
</script>