![[jQuery] 이벤트 다루기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcSntPu%2FbtqEGTJqYaM%2F0c3ZqkIDnQ6XXSeZQKZoa0%2Fimg.png)
1. 이벤트
이벤트는 '사건'을 의미합니다. 요소를 클릭하는 경우에는 클릭이라는 행위 자체를 하나의 이벤트라고 볼 수 있으며 ready와 같은 경우에도 문서가 준비됨을 알리는 이벤트라고 할 수 있습니다.
2. 이벤트 연결
jQuery에서 이벤트를 연결하는데 사용되는 메서드로 on이 있습니다. 이벤트를 연결하는 기본적인 메서드입니다. 아래 예제에서는 요소를 클릭했을 때 이벤트를 연결하는 과정을 보여주고 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('span').on('click', function(){
alert('클릭');
})
});
</script>
</head>
<body>
<span>클릭</span>
</body>
</html>문자열 이외에 객체를 통한 이벤트 연결도 가능합니다.
$(function () {
$('span').on({
click: function() {
alert($(this).text());
}
})
});
위 예제의 경우 this키워드가 사용되었는데 바로 이벤트를 발생시킨 요소를 의미합니다. this를 적절하게 사용하면 이벤를 발생시킨 요소 안으로 선택자를 한정할 수 있는데 경우에 따라 유용하게 사용될 수 있습니다. (화살표함수사용시 주의)
아래 예제에서는 동일한 div요소 2개에 각각 다른 내용을 가진 p요소를 포함하고 있습니다. div를 클릭할때 p요소의 문자열을 출력하도록 되어 있는데 각각 이벤트를 발생시킨 요소를 찾고자 this키워드를 사용했습니다. 이때 $('요소', this)와 같은 형식으로 이벤트를 발생시킨 div의 p요소 내용만을 가져오도록 하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('div').on({
click: function() {
alert($('p', this).text());
}
})
});
</script>
</head>
<body>
<div>
<p>이벤트1</p>
</div>
<div>
<p>이벤트2</p>
</div>
</body>
</html>이벤트는 이벤트 발생시 이벤트 객체를 통해 특수한 상황을 제어할 수도 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('a').on('click', function() {
alert('클릭');
})
});
</script>
</head>
<body>
<a href="http://cliel.com">이동</a>
</body>
</html>위 예제의 경우 a링크를 클릭하면 '클릭'이라는 메시지를 낸 뒤 href속성에 지정된 주소로 이동하게 됩니다. 페이지 이동은 a링크가 가진 자체적인 고유한 이벤트로서 동작하기 때문입니다. 그러나 만약 위에 같은 상황에서 a링크의 고유한 이벤트 처리를 제거하고 정해진 동작을 수행하고자 한다면 다음과 같이 처리할 수 있습니다.
$(function () {
$('a').on('click', function(event) {
event.preventDefault();
alert('클릭');
})
});이벤트 객체를 통해 preventDefault() 메서드를 호출하여 기본 이벤트를 제거하도록 하였습니다. 이렇게 하면 '클릭'메시지만 내고 페이지 이동은 하지 않게 됩니다. 이 외에도 stopPropagation() 메서드를 이용해 이벤트 버블링을 차단할 수 있으며 pageX, pageY속성으로 마우스의 좌표를 구할 수도 있습니다.
통상 preventDefault() 메서드와 stopPropagation() 메서드를 같이 사용하는 경우가 많으므로 jQuery에서는 return false를 사용하면 이 2개의 메서드를 호출한것과 동일하게 처리합니다. (javascript에서는 기본 이벤트를 제거하는 역할만 수행합니다.)
$(function () {
$('a').on('click', function() {
alert('클릭');
return false;
})
});또한 on메서드는 selector 매개변수를 통해 이벤트를 발생시키는 요소를 제어할 수 있습니다. 이러한 방식은 동적으로 생성되는 요소까지 이벤트에 반응할 수 있도록 처리할 수 있습니다. 예를 들어
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('span').on('click', function() {
$('div').append('<br /><span>요소생성</span>');
})
});
</script>
</head>
<body>
<div>
<span>요소생성</span>
</div>
</body>
</html>위와같이 하면 가장 위에 있는 span을 클릭할 때마다 아래에 span요소가 생성될 테지만 새롭게 생성되는 span은 클릭을 해도 반응하지 않습니다. 그러나 selector매개변수를 통해 직접 span을 지정하고 이벤트에 반응하는 요소를 상위 div나 document로 지정하게 되면
$(function () {
$('div').on('click', 'span', function() {
$('div').append('<br /><span>요소생성</span>');
})
});자연스럽게 새로추가되는 span요소까지도 클릭이벤트에 반응할 수 있도록 구현하는 것이 가능한 것입니다.
참고로 on과 비슷하게 one 이라는 메서드도 존재하는 데 사용방법은 on과 같지만 이벤트를 딱 한 번만 연결하고 바로 이벤트를 제거한다는 차이가 있습니다.
on 이외에 jQuery에서는 자주 사용되는 이벤트의 경우 해당 이벤트와 직접적으로 연결 가능한 메서드를 제공하고 있습니다.
| blur | 요소가 포커스를 잃음 |
| click | 마우스 클릭 |
| change | 내용 변경 |
| dbclick | 마우스 더블클릭 |
| error | 에러 발생 |
| focus | 요소에 포커스가 맞춰짐 |
| focusin | 요소에 포커스가 맞춰지기전 |
| focusout | 요소에 포커스가 맞춰진 후 |
| keydown | 키보드 키가 눌려짐 |
| keypress | 키보드 입력 (한글은 미지원) |
| keyup | 키보드 키가 눌려진 후 뗌 |
| mousedown | 마우스 버튼 누름 |
| mouseup | 마우스 버튼을 눌렀다가 뗌 |
| mousemove | 마우스를 움직임 |
| mouseover | 마우스가 요소안에 있음 |
| mouseout | 마우스가 요소밖에 있음 |
| mousseenter | 마우스가 요소외부에서 내부로 이동 |
| mouseleave | 마우스가 요소내부에서 외부로 이동 |
| ready | 문서가 준비됨 |
| select | 요소가 선택됨 (input text와 textarea미지원) |
| submit | submit 누름 |
| reset | reset 누름 |
| scroll | 스크롤이 발생함 |
| load | 문서가 로드됨 |
| resize | 문서의 크기가 변경됨 |
| unload | 문서가 닫혀짐 |
| hover |
예컨데 click의 경우 다음과 같이 연결할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('span').click(function(){
alert('click');
});
});
</script>
</head>
<body>
<span>클릭</span>
</body>
</html>참고로 이벤트도 화살표 함수 사용이 가능합니다.
$(function () {
$('span').click(() => {
alert('click');
});
});이벤트 중 hover의 경우에는 좀 특이한데 이 이벤트는 mouseenter와 mouseleave를 합쳐놓은 이벤트입니다. 따라서 이벤트 처리기도 mouuseenter용 하나와 mouseleave용 하나 이렇게 2개의 처리기를 지정해야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('span').hover(
function() {
alert('mouse enter');
},
function() {
alert('mouse leave');
}
);
});
</script>
</head>
<body>
<span>SPAN</span>
</body>
</html>
3. 이벤트 호출
이벤트는 사용자가 버튼을 누르거나 텍스트 박스의 내용을 입력하는 등 사용자가 특정 행위를 함으로써 얻어지는 이벤트 처리가 대부분이지만 특정 상황에서는 이벤트를 고의적으로 발생시켜야 하는 경우도 있습니다.
이벤트를 고의적으로 발생시키는 방법중 하나는 trigger() 메서드를 사용하는 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('span').on('click', function() {
alert('클릭');
});
$('span').trigger('click');
});
</script>
</head>
<body>
<span>클릭</span>
</body>
</html>예제에서는 span에 click이벤트를 연결하고 그 뒤에 trigger메서드로 click이벤트를 발생시키고 있습니다. 이 일련의 동작이 페이지 로드가 완료되는 시점에 걸려 있으므로 페이지가 열린 뒤 곧바로 '클릭'이라는 메시지를 낼 것입니다.
또한 trigger() 메서드를 사용하면 이벤트 처리기에 특정 값을 전달할 수도 있습니다.
$(function () {
$('span').on('click', function(event, param1, param2) {
alert('클릭' + param1 + '-' + param2);
});
$('span').trigger('click', [10, 20]);
});이벤트 처리기에서는 event객체와 더불어 param1, param2라는 2개의 매개변수를 전달받는데 trigger에서는 발생하고자 하는 이벤트와 배열을 지정하면 해당 배열 값이 자동적으로 이벤트 처리기의 매개변수로 전달됩니다.
다만 모든 이벤트가 trigger() 메서드를 통해서만 발생시킬 수 있는 것은 아니고 click과 같은 자주 사용되는 이벤트의 경우 trigger() 메서드를 호출할 필요 없이 곧바로 이벤트를 호출할 수 있습니다.
$(function () {
$('span').on('click', function() {
alert('클릭');
});
$('span').click();
});
4. 이벤트 제거
요소로부터 이벤트를 제거하는 경우에는 off() 메서드를 사용할 수 있습니다. 아래 예제에서는 off를 통해 click이벤트를 제거하고 있으므로 click이벤트에 반응하지 않게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('span').click(function() {
alert('click');
});
$('span').off('click');
});
</script>
</head>
<body>
<span>SPAN</span>
</body>
</html>만약 off() 메서드 사용 시 아무런 매개변수도 전달하지 않으면 해당 요소의 모든 이벤트를 제거하게 됩니다. 또한 selector매개변수를 통해 이벤트를 연결한 경우에도 그대로 selector매개변수를 지정하여 이벤트를 제거할 수 있습니다.
$('div').off('click', 'span');
'Web > JQuery' 카테고리의 다른 글
| [jQuery] 전역함수 (0) | 2020.06.17 |
|---|---|
| [jQuery] 효과 (0) | 2020.06.16 |
| [jQuery] 요소 조작 메서드 (0) | 2020.06.07 |
| [jQuery] 요소 탐색 메서드 (0) | 2020.06.03 |
| [jQuery] 객체 합치기 ($.extend) (0) | 2020.06.02 |