웹 페이지에 버튼이 여러 개 있고 각각의 버튼은 서로 다른 일 한다.
버튼에 대한 이벤트를 올바로 처리하려면 이 여러 개 버튼들 중
어느 버튼을 클릭했는지 알아야 하는데 이 방법을 알아보자.
1. 이벤트 객체의 target 속성 이용
자바스크립트는 이벤트 객체를 이벤트 처리 함수에 전달하며,
이벤트 객체에는 이벤트에 대한 세부 내용이 담겨 있다.
그중 하나인 target은 이벤트가 일어난 엘리먼트를 찾는 데 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$(".click-btn").on('click', function(e){
console.log(e.target.id)
});
});
</script>
<title>JS Bin</title>
</head>
<body>
<button class="click-btn" id="btn-1">1 번 버튼</button>
<button class="click-btn" id="btn-2">2 번 버튼</button>
<button class="click-btn" id="btn-3">3 번 버튼</button>
<button class="click-btn" id="btn-4">4 번 버튼</button>
</body>
</html>
코드를 보면 html 부분에는 버튼 4개가 있고 각 버튼에는 class 명을 동일하게 적어주고
class 명을 동일하게 다 적는 이유는 저 버튼 4개를 전부 한 번에 클릭 이벤트 등록을 하려고 하는 것이니
class 명을 동일하게 적어주어야 한다.
그리고 각 버튼의 id는 다르게 식별이 가능할 수 있도록 지정해주어야 한다.
이제 자바스크립트 부분을 봐보면 제이쿼리 선택자가
click-btn이라는 클래스명으로 버튼 클릭 이벤트를 등록했다.
그럼 저 1~4개의 버튼을 클릭하면 전부 반응을 할 것이다.
하지만 내가 클릭한 버튼을 인지해야 되기 때문에
클릭한 버튼의 target 속성을 이용하면 구현하기 쉽다.
// 각개 버튼이 클릭될 때 해당 버튼의 구현하고 싶은 코드 구현 방법
$(".click-btn").on('click', function(e){
if(e.target.id === 'btn-1'){
// 1번 버튼을 클릭했을 때 구현하고 싶은 코드
}else if(e.target.id === 'btn-2'){
// 2번 버튼을 클릭했을 때 구현하고 싶으 코드
}
});
// 각개 버튼이 클릭될 때 해당 버튼의 색을 빨간색으로 바꾸는 예제
$(".click-btn").on('click', function(e){
$(e.target).css({'background-color':'red'});
});위 코드처럼 어떤 버튼이 클릭이 되었는지 확인할 수 있다.
그리고 click 이벤트를 좀 다르게 해석하는 사람들이 있는데 어떤 부분이냐면,
버튼을 클릭했는데 왜? 이벤트가 발생이 안되는지?라는 사람들이 있다.
이게 무슨 말이냐면 클릭했을 때 발생되는 게 아니라 클릭하고 마우스에서 손을 떼면 발생하는 이벤트다.
이게 click 이벤트이다.
만약 내가 클릭하는 순간 마우스를 버튼을 누르는 순간 이벤트를 발생해야 한다 싶으면
다른 이벤트를 사용해야 한다.
이럴 땐 아래 코드처럼 mousedown 이벤트를 사용하면 된다.
$('.click-btn').on('mousedown', function(e){
console.log(e.target.id)
});
2. 더블클릭 이벤트 연결하기
버튼을 더블 클릭해야 해야지만 이벤트 처리를 해야 되는 코드를 만들어야 한다면
jQuery는 이 더블클릭 이벤트를 지원한다.
어렵지 않다 예제를 봐보자.
위와 동일한 코드에서 자바스크립트 부분만 수정할 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$('.click-btn').on('dblclick', function(e){
console.log(e.target.id)
});
});
</script>
<title>JS Bin</title>
</head>
<body>
<button class="click-btn" id="btn-1">1 번 버튼</button>
<button class="click-btn" id="btn-2">2 번 버튼</button>
<button class="click-btn" id="btn-3">3 번 버튼</button>
<button class="click-btn" id="btn-4">4 번 버튼</button>
</body>
</html>
위와 동일 html 문서에 자바 스크립트 부분의 click 부분 -> dblclick로 바꿔 주기만 했다.
이렇게만 해주면 버튼은 두 번을 클릭해야지만 동작한다.
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - 엘리먼트가 focus(포커스)를 얻고 잃을 때 이벤트 (0) | 2022.03.06 |
|---|---|
| jQuery - 마우스 이벤트 관련, 왼쪽/오른쪽 클릭 된 곳 알아내기 (0) | 2022.03.05 |
| jQuery - 버튼을 한 번 누른 후 비활성으로 변경하는 방법 (0) | 2022.03.05 |
| jQuery - 자동으로 이벤트 발생 시키는 방법 (0) | 2022.03.05 |
| jQuery - html 문서 로드 후 자바스크립트 실행 (0) | 2022.03.03 |