JQuery 이벤트 리스너

JQuery 이벤트 리스너

: 이벤트가 발생했을 때 그 처리를 담당하는 함수

 

 

 

 

 

로딩 이벤트

: 문서가 로드될 때 바로 발생하는 이벤트(문서를 읽기 전 먼저 실행)

• 사람들에게 무언가를 보여주기 전에 해야하는 작업을 넣는 곳
• 맨 첫번째 함수만 실행(두 개 이상 사용X)

 

종류

1) .ready()

2) $()

$(document).ready(function() {
      alert("document.ready");
});

// or

$(function(){
	    alert("ready")
});

 

 

 

마우스 이벤트

: 마우스와 관련된 이벤트

 

종류

1) click()

// 참고
on(”click”,function() {})
= click( function() {})

2) mouseover()

3) hover()

4) scroll()

//클릭했을 때 발생하는 이벤트
$("#div1").click(function(){
    console.log( "div click" );
});

// 마우스를 갖다 댔을 때 발생하는 이벤트
$("#div1").mouseover(function(){ 
    console.log( "div mouseover");
});

//마우스를 갖다 댔을 때, 땠을 때 모두 발생하는 이벤트
$("#div1").hover(function(){  
    console.log( "div hover");
}, function() {
    console.log( "div hover2");  //함수를 두 개 작성하면 마우스를 갖다 댔을 때와 땠을 때 다른 값을 출력함.
});

// scroll했을 때 발생하는 이벤트
$( window ).scroll(function(){  //window: 윈도우 창
    console.log( "window scroll" );
});

 

 

 

키보드 이벤트

:키보드와 관련된 이벤트

 

종류

1) keydown(): 사람이 손으로 키보드를 눌렀는데, 아직 글자가 나오기 전

2) keyup(): 키보드에서 손을 뗐을 때

• 순서: keydown → (keypress) → keyup

$("#input1").keydown(function(e) {
    console.log("keydown : ", e.currentTarget.value );
    $("#alert").text("글자가 입력됨, " + e.currentTarget.value );
    
    // console.log(e);
    // if ( e.keyCode == 13 ) {  //keyCode 13은 enter key임
    //     console.log( "enter key" );
    // }
});

$("#input1").keyup(function(e) {
    console.log("keyup : ", e.currentTarget.value );
    // console.log( "input keyup");
});