선택장애

제이쿼리(jQuery) - 이벤트들(click,blur,focusout,change,keyup) 본문

제이쿼리(jQuery)

제이쿼리(jQuery) - 이벤트들(click,blur,focusout,change,keyup)

yes or yes 2022. 5. 3. 15:23
반응형


제이쿼리에 아주 많은 이벤트들이 있지만 사용하면서 자주 쓰였던 이벤트들입니다.

$("#GROUP_MIN").on( "click", function() {    
            GROUP_MIN();   //자기가 하고싶은 이벤트 내용    
});

<button type="button" class="btn btn-primary btn-sm" id="GROUP_MIN">
         <span class="fa fa-minus" aria-hidden="true"></span>
</button>

//GROUP_MIN이란 버튼을 클릭하게 되면 발생되는 이벤트입니다.

 

 

$("#K_PHONE").focusout(function(ev){   
             GROUP_MIN();    //자기가 하고싶은 이벤트 내용   
}); 

<div class="input-group-addon">번호</div>
        <input type="number" class="form-control" id="K_PHONE">
//K_PHONE라는 아이디를 가진 input박스를 벗어나면 발생되는 이벤트입니다.   

 

 

$('#K_PHONE').blur(function(){
          GROUP_MIN();    //자기가 하고싶은 이벤트 내용   
});     

<div class="input-group-addon">번호</div> 
        <input type="number" class="form-control" id="K_PHONE"> 


//K_PHONE라는 아이디를 가진 input박스를 벗어나면 발생되는 이벤트입니다. 

(위의 focus out과 같은 겉으로는 같은 이벤트입니다.)

 

 

$("#selectEmail").change(function() {
       GROUP_MIN();    //자기가 하고싶은 이벤트 내용 
});

<select name="selectEmail" id="selectEmail" class="form-control">
                        <option value="1" selected>1</option> 
                        <option value="2" selected>2</option>  
  </select>

//select box에서 value값이 바뀌게 선택될때마다 즉각적으로 발생되는 이벤트입니다.

 

 

$("#K_PHONE").keyup(function(ev){
  GROUP_MIN();    //자기가 하고싶은 이벤트 내용   
});

<div class="input-group-addon">번호</div> 
        <input type="number" class="form-control" id="K_PHONE"> 

//자판의 키를 눌렀다가 떼었을 때 발생되는 이벤트입니다.
(비슷하게 사용되는 keydown도 있습니다.)

반응형