jQuery 10. 이벤트

이벤트 핸들러(이벤트 발생시 실행될 function) 연결방법 

 

이벤트 메소드를 통한 연결

$("선택자").이벤트메소드(function(){            해당 요소에 해당 이벤트 발생시 실행할 내용;   })

 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <h4 id="test1">클릭해보세용</h4>

    <script>
        $(function(){
            $("#test1").click(function(){
                $(this).text("클릭되었습니다.");
            })

            $("#test1").click(function(){
                $(this).css("backgroundColor","pink"); // 이벤트는 중첩가능 
            })
            $("#test1").dblclick(function(){
                $(this).css("color","lightcoral");
            })
        })
    </script>

클릭해보세용

 

on 메소드를 이용한 방법

$("선택자").on("이벤트명",function(){         해당 요소에 해당 이벤트가 발생시 실행할 내용;     })

<h4 id="test2">마우스 클릭 및 올려보세요</h4>

    <script>
        $(function(){
           //on메소드 사용시한요소에 다중으로 이벤트 걸기 가능 

           $("#test2").on({mouseenter:function(){
                $(this).css("backgroundColor","coral").text("마우스올라감");
           },mouseout:function(){
                $(this).css("backgroundColor","yellow").text("마우스빠져나감");
           }, click:function(){ //기존에 잘 수행되던 mouseenter,mouseout이벤트 핸들러 제거 
            // 이벤트 핸들러 제거 : off메소드 
                $(this).off("mouseenter").off("mouseout").css("backgroundColor","skyblue").text("이벤트제거됨");
           }})
        })
    </script>

마우스 클릭 및 올려보세요

 

동적으로 만들어진 요소에 이벤트 연결할때

( 동적으로 만들어진 요소 : 처음 문서 로딩시에는 없다가 나중에 새로이 만들어지는 요소)

$("상위요소선택자").on("이벤트명","하위요소선택자(이벤트를 걸고자하는 요소)",fucntion(){         선택된 상위요소 안에 존재하는 하위요소에 해당 이벤트가 발생했을때 실행할 내용;         })

 <div id="wrap2" style="border: 1px solid red;">
        <h6>기존에 존재하는 h6요소</h6>

    </div>

    <script>
        $(function(){
             $("#wrap2").on("click","h6",function(){
                 $("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어진 요소 </h6>")
             })

        })
    </script>

기존에 존재하는 h6요소

 

일회성 메소드(One메소드)

- 딱 한번만 실행되는 메소드 :  $("선택자").one("이벤트명", function(){});  

<div id="test3">일회성 이벤트 실행하기 </div>
<script>
	$(function(){
    	$("#test3").one("click",function(){
        	alert("처음이자 마지막 이벤트 실행");
         }); 
   });
</script>

일회성 이벤트 실행하기

 

키보드 관련 이벤트 

  keydown : 키보드의 모든 키가 눌려질때 발생하는 이벤트 

  keypress : 키보도의 펑션키, 기능키, 한글 제외한 나머지키가 눌려질때 발생하는 이벤트

  keyup : 키가 떼어지는 순간 발생하는 이벤트

-> 이벤트가 발생했을때 함수에 값을 전달하면서 발생함

<input type="text" id="test4">
<script>
	$(function(){
    	$("#test4").keyup(function(e){
        	console.log($(this).val());
            console.log(e.key); // 입력하고 있는 키값 
        })
   })
</script>