JQuery, Event 함수(hover, keyup, keydown, json객체, keypress, which)

Event

 

click, hover, change, focus, key event ... 

 

click : 클릭했을 때

hover : 마우스를 올렸을 때

change : 값이 변했을 때 - checkbox, radio에서 주로 사용

focus : 포커스 갔을 때

key event : 키보드 이벤트가 발생했을 때

 

Hover

 

마우스를 올렸을 때

$('#input').hover(function(){
	$('#result').html('마우스 올렸을 때')
	}, function(){
		$('#result').html('마우스 내렸을 때')
	});
});

 

 

---

key

키보드를 입력했을 때

$('#아이디').keydown(function(){ });

키보드 입력에서 손을 올렸을 때
$('#아이디').keyup(function(){ });

.keydown, .keyup는 대소문자 구별을 하지 않는다.

(A도 a도 65라고 나온다)

 

keyCode

JavaScript에서 event.keyCode 를 하면 각 키보드에 해당하는 고유번호를 알 수 있다.
이 메소드가 jQuery에서는 event.which 으로 사용하게 된다.

 

[형식]
json 객체
{
     변수: 값;
}

json 객체 배열
[
     { 변수 : 값, 변수 : 값, ... },
     { 변수 : 값, 변수 : 값, ... }
     ...
]

function getKeyName(keyCode){
    //JSON 객체 배열
    let keyMap = [
    { code: 8, name: "backspace"},
    { code : 9, name: "tab"},
    { code : 13, name: "enter"},
    { code : 16, name: "shift"},
    { code : 17, name: "ctrl"},
    { code : 18, name: "alt"},
    { code : 19, name: "pausebreak"},
    { code : 20, name: "capslock"},
    { code : 21, name: "han/eng"},
    { code : 25, name: "hanja"},
    { code : 27, name: "esc"},
    { code : 65, name: "A"},
    { code : 97, name: "a"},
    ];
    
    for(let i=0; i<keyMap.length; i++){
        if(keyMap[i].code == keyCode) return keyMap[i].name
        }
    }

    $(function(){
        $('#input > input[type="text"]').keydown(function(e){
        	$('#result').html(e.which + '번 키를 눌렀음 &gt;&gt;' + getKeyName(e.which));
        });
    });

키보드를 눌렀을 때
.keydown(function(event){
e, ev, event 여러개 사용한다.

 

키 값을 가져온다.

e.which

 

해당 키값의 키의 이름을 가져온다.
getKeyName(e.which)

 

* 대소문자 구별(Ctrl, Shift, Alt 구별 못함)
keypress

---

focus()

 

포커스가 들어갔을 때

$('#input > input[type="text"]').focus(function(){
	$('#result').html('포커스가 들어갔습니다')
});

 

blur()

 

포커스가 나갔을 때

$('#input > input[type="text"]').blur(function(){
	$('#result').html('포커스가 나갔습니다')
});