반응형
웹 페이지에 버튼이 여러 개 있고 각각의 버튼은 서로 다른 일 한다.
버튼에 대한 이벤트를 올바로 처리하려면 이 여러 개 버튼들 중
어느 버튼을 클릭했는지 알아야 하는데 이 방법을 알아보자.
1. 이벤트 객체의 target 속성 이용
자바스크립트는 이벤트 객체를 이벤트 처리 함수에 전달하며,
이벤트 객체에는 이벤트에 대한 세부 내용이 담겨 있다.
그중 하나인 target은 이벤트가 일어난 엘리먼트를 찾는 데 사용할 수 있다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="//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="//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.06jQuery - 마우스 이벤트 관련, 왼쪽/오른쪽 클릭 된 곳 알아내기 (0)2022.03.05jQuery - 버튼을 한 번 누른 후 비활성으로 변경하는 방법 (0)2022.03.05jQuery - 자동으로 이벤트 발생 시키는 방법 (0)2022.03.05jQuery - html 문서 로드 후 자바스크립트 실행 (0)2022.03.03우리가 사용하는 웹 사이트나 웹 애플리케이션에서는 수많은 이벤트가 발생합니다. 사용자가 마우스나 키보드로 일으킬 수 있는 이벤트도 있고, 브라우저 스스로도 웹페이지를 로딩하면서 여러 이벤트를 발생시킵니다.
이번 포스팅에서는 이렇게 웹에서 다양한 이유로 발생하는 이벤트를 처리하는 여러가지 방법에 대해서 알아보겠습니다.
HTML 이벤트 속성
먼저 가장 고전적이지만 사용하기 간단한 방법부터 알아볼까요?
HTML 요소(element)에서 발생하는 이벤트를 처리하는 가장 쉬운 방법은 HTML의 이벤트 속성을 활용하는 것입니다. <input name="test" onchange="console.log(value)" />2 형태를 갖는 이벤트 속성은 HTML의 모든 요소에 사용이 가능하며, 해당 타입의 이벤트 발생 시 실행할 자바스크립트 코드(이벤트 핸들러)를 속성 값으로 설정해줄 수 있습니다.
예를 들어, 다음 <input name="test" onchange="console.log(value)" />3 요소는 클릭했을 때, 브라우저 알람으로 <input name="test" onchange="console.log(value)" />4이라는 메세지가 뜰 것입니다.
<button title="alert(textContent)">클릭</button>
다른 예로, 다음 <input name="test" onchange="console.log(value)" />5 요소는 클릭했을 때, 브라우저 콘솔에 입력한 내용이 출력될 것입니다.
<input name="test" onchange="console.log(value)" />
여기서 자바스크립트 코드에 사용된 <input name="test" onchange="console.log(value)" />6와 <input name="test" onchange="console.log(value)" />7는 이벤트가 발생한 HTML 요소의 속성입니다. 이렇게 HTML의 이벤트 속성으로 사용된 자바스크립트 코드에서는 이벤트가 발생한 요소에 자연스럽게 접근할 수 있습니다.
See the Pen js-dom-event-handling-1 by Dale Seo (@daleseo) on CodePen.이처럼 HTML 이벤트 속성은 간단한 코드를 실행하기에는 매우 간편하지만 이벤트 발생 시에 실행할 로직이 복잡한 경우에는 그닥 추천되지는 않습니다. 그리고 순수하게 HTML 기반인 이 방법에는 한가지 큰 제약 사항이 있는데 바로 이벤트 핸들러를 한 번 설정하면 제거하는 것이 어렵습니다. 다시말해, 이벤트 핸들러를 제거하려면 다음에 소개드릴 자바스크립트의 도움이 필요하게 됩니다.
JavaScript 이벤트 속성
HTML 요소에서 발생하는 이벤트를 처리하는 두 번째 방법은 자바스크립트의 DOM 노드의 이벤트 속성을 활용하는 것입니다.
우선 위에서 작성한 HTML 코드에서 이벤트 속성을 모두 제거하겠습니다.
<button>클릭</button>
그 다음, 자바스크립트로 <input name="test" onchange="console.log(value)" />3 요소를 선택 후 <input name="test" onchange="console.log(value)" />9 속성에 이벤트 핸들러 함수를 지정해주면 됩니다.
const buttonEl = document.querySelector("button"); buttonEl. title = function (event) { alert(this.textContent); // alert(event.target.textContent); };
이벤트가 발생한 요소에 접근할 때는 <button>클릭</button>0 키워드나 함수의 인자로 넘어온 <button>클릭</button>1 매개 변수의 <button>클릭</button>2 속성을 사용할 수 있습니다.
<input name="test" onchange="console.log(value)" />5 요소에도 마찬가지로 <button>클릭</button>4 속성을 제거하겠습니다.
<input name="test" />
이번에는 코드가 좀 더 깔끔해 보이도록 <button>클릭</button>5 키워드 대신에 <button>클릭</button>6 기호를 사용하는 람다(lambda) 함수를 사용해보겠습니다.
const inputEl = document.querySelector("input"); inputEl.onchange = (event) => console.log(event.target.value);
이벤트 핸들러로 람다 함수를 사용할 때 주의할 점은 더 이상 <button>클릭</button>0 키워드로 이벤트가 발생한 요소에 접근할 수 없다는 것입니다. 따라서 이벤트가 발생한 요소에 접근할 때는 반드시 <button>클릭</button>8을 사용해야 합니다.
이벤트 핸들러를 제거할 때는 선택한 HTML 요소의 이벤트 속성을 <button>클릭</button>9로 설정해주면 됩니다.
inputEl.onchange = null;
See the Pen js-dom-event-handling-2 by Dale Seo (@daleseo) on CodePen.JavaScript 이벤트 함수
마지막으로 소개해드릴 방법은 자바스크립트의 DOM 노드를 대상으로 const buttonEl = document.querySelector("button"); buttonEl. title = function (event) { alert(this.textContent); // alert(event.target.textContent); };0 함수를 호출하는 것입니다.
const buttonEl = document.querySelector("button"); buttonEl. title = function (event) { alert(this.textContent); // alert(event.target.textContent); };0 함수는 첫 번째 인자로 이벤트 타입명을 두 번째 인자로 이벤트 핸들러를 받습니다.
따라서 위에서 <input name="test" onchange="console.log(value)" />9 속성에 지정했던 이벤트 핸들러 함수를 다음과 같이 const buttonEl = document.querySelector("button"); buttonEl. title = function (event) { alert(this.textContent); // alert(event.target.textContent); };3이라는 이벤트 타입명과 함께 const buttonEl = document.querySelector("button"); buttonEl. title = function (event) { alert(this.textContent); // alert(event.target.textContent); };0 함수에 넘길 수가 있습니다.
const buttonEl = document.querySelector("button"); buttonEl.addEventListener("click", function (event) { alert(this.textContent); });
물론 람다 함수로 이벤트 핸들러를 넘길 수도 있으며, 마찬가지로 이 때는 <button>클릭</button>0 키워드로 이벤트가 발생한 요소에 접근할 수 없다는 점 주의해야 합니다.
const inputEl = document.querySelector("input"); inputEl.addEventListener("change", (event) => console.log(event.target.value));
const buttonEl = document.querySelector("button"); buttonEl. title = function (event) { alert(this.textContent); // alert(event.target.textContent); };0 함수를 사용할 때 큰 이점은 바로 하나의 DOM 노드를 대상으로 이 함수를 여러번 호출할 수 있어서, 해당 HTML 요소에서 이벤트가 발생했을 때 여러 이벤트 핸들러를 실행할 수 있다는 것입니다.
예를 들어, <input name="test" onchange="console.log(value)" />5 요소에서 const buttonEl = document.querySelector("button"); buttonEl. title = function (event) { alert(this.textContent); // alert(event.target.textContent); };8 타입의 이벤트가 발생했을 때 이벤트 내용을 로깅하도록 const buttonEl = document.querySelector("button"); buttonEl. title = function (event) { alert(this.textContent); // alert(event.target.textContent); };9라는 함수를 이벤트 핸들러로 추가해보겠습니다.
function logEvent(event) { console.log({ type: event.type, name: event.target.name, value: event.target.value, }); } inputEl.addEventListener("change", logEvent);
이제, <input name="test" onchange="console.log(value)" />5 요소에 <input name="test" />1이라고 입력하면 아래와 같이 브라우저 콘솔에 이벤트 내용이 출력이 될 것입니다.
<input name="test" onchange="console.log(value)" />0
이벤트 핸들러를 제거할 때는 <input name="test" />2 함수를 사용하여 이벤트 타입명과 이벤트 핸들러를 넘기면 됩니다.
<input name="test" onchange="console.log(value)" />1
See the Pen js-dom-event-handling-2 by Dale Seo (@daleseo) on CodePen.마치면서
지금까지 웹페이지에서 발생하는 이벤트를 처리하는 대표적인 3가지 방법에 대해서 살펴보았습니다. 각 방법의 장단점을 간단하게 정리해보면,
- HTML 이벤트 속성: 가장 고전적이지만 이벤트 핸들러가 간단할 경우 간편하게 게 쓸 수 있음. 이벤트 핸들러를 제거하기 어려움.
- JavaScript 이벤트 속성: 위와 유사하나 자바스크립트를 사용하며 쉽게 이벤트 핸들러를 제거할 수 있음.
- JavaScript 이벤트 함수: 여러 이벤트 핸들러를 유연하게 추가하거나 제거할 수 있음. 사용법이 상대적으로 어려움.
개인적으로는 저는 가장 강력한 마지막 방법을 추천드리고 싶지만 첫번째나 두번째 방법도 잘 숙지해두시면 기존에 작성된 코드를 읽을 때 도움이 되실 겁니다. 이벤트 처리는 어떤 프레임워크로 웹 개발을 하든 반드시 알아야 할 부분이오니 이번 기회에 잘 정리해두셨으면 좋겠습니다.