jQuery click 이벤트의 개념과 활용방법 알아보기

오늘은 jQuery의 기본 기능 중 하나인 click 이벤트에 대해서 정리해 보려고 한다. 화면 개발에서 가장 많이 사용하는 이벤트가 아닐까 생각한다. 그만큼 사용자가 가장 많이 사용하는 기능인 것이고, 그만큼 기능의 사용법과 특징, 주의사항 등을 잘 알아두는 것이 중요하다.
jQuery는 러닝커브가 낮은 편이고, click 이벤트와 같이 흔한 기능을 위주로 학습한다면 실력 향상이 빠르다는 것을 느낄 수 있다는 장점이 있다.

---

click 이벤트의 개념

jQuery에서의 click 이벤트는 웹 페이지에서 요소를 클릭했을 때 발생하는 이벤트를 처리하기 위한 함수다. 이를 통해서 사용자와의 상호작용에 대한 반응을 구현할 수 있다.

선택자의 활용
jQuery에서는 css 선택자를 사용하여 특정 요소를 선택할 수 있다. 따라서 click 이벤트를 등록할 때에도 선택자를 활용하여 해당 요소를 선택할 수 있다.

동적 요소 처리
jQuery의 click 이벤트는 동적으로 생성된 요소에 대해서도 적용할 수 있다. 즉, 페이지가 로드된 후에 생성되는 요소에 대해서도 click 이벤트를 등록할 수 있다.

이벤트 전파
jQuery의 click 이벤트는 전파에 대한 설정도 가능하다. 이벤트가 발생한 요소를 기준으로 상위 요소로의 이벤트 전파를 중지하거나, 다양한 방식으로 전파를 제어할 수 있다.

이벤트 위임
jQuery의 click 이벤트는 이벤트 위임을 통해 여러 요소에 대해 한 번에 이벤트를 처리할 수 있으며, 동적으로 생성되는 요소에 대해서도 효과적으로 이벤트를 적용할 수 있는 방법이다.

---

기본 문법

$(선택자).click(function () {
  // 클릭시 실행될 코드
});

위와 같이 선택자를 이용하여 요소를 선택하고, 클릭 이벤트가 실행될 때 처리할 코드를 함수 내에 작성한다.


기본 문법 예제

<button id="clickButton">버튼 클릭</button>

<script>
$('#clickButton').click(function () {
    alert('버튼이 클릭되었습니다.');
});
</script>

위와 같이 #clickButton이라는 id 값을 가진 요소를 선택자로 해서 click 이벤트를 생성하고, 이벤트가 실행되었을 경우 alert 알림 창이 뜨도록 코드를 작성할 수 있다. jQuery를 사용한다면 자바스크립트보다 훨씬 더 간결하고 편리하게 이벤트를 등록하고 코드의 가독성을 올려줄 수 있다.

---

click 이벤트의 활용 사례

jQuery의 click 이벤트를 사용하면 웹 개발에서 다양한 상황에 활용될 수 있다. 


버튼 클릭시 동작 추가하기

$('#button').click(function () {
    // 버튼 클릭시 div 요소를 숨기거나 보이게 하는 toggle 실행
    $('#div').toggle();
});

위와 같이 버튼을 클릭하면 div 요소를 숨기거나 보이게 하는 동작을 추가할 수 있다.


메뉴 토글

$('#toggle').click(function () {
    // 메뉴를 슬라이드로 펼치거나 접음
    $('#menu').slideToggle();
});

위와 같이 menuToggle에 해당하는 요소를 클릭하면 menu를 슬라이드로 펼치거나 접을 수 있는 작업을 실행한다.

모달 팝업창 열기

$('#modalBtn').click(function () {
    // 모달 팝업창 열기
    $('#modal').fadeIn();
});

위와 같이 modalBtn에 해당하는 요소를 클릭하게 되면 modal에 해당하는 모달 팝업창을 나타나도록 한다.


요소 추가/제거

$('#addButton').click(function() {
    // 새로운 요소 추가
    $('<div>New Element</div>').appendTo('#container');
});

$('#removeButton').click(function() {
    // 마지막 요소 제거
    $('#container div:last-child').remove(); 
});

위의 코드는 addButton을 클릭했을 때 요소를 추가하거나, removeButton을 클릭했을 때 요소를 제거할 수 있다.


이렇게 다양한 상황에서 활용될 수 있으며, 이 밖에도 상황에 따라 클릭 이벤트를 구현하여 사용자의 상호작용하는 기능을 확장할 수 있다.
그렇다면 조금 더 상세하게 예제 코드를 작성해 보고 실행되는 화면까지 확인해 보도록 하자.

---

click 이벤트 예제 소스 코드 1 (기본 동작)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    /**
     * button click 이벤트

     */
    $('#buttonId').click(function () {
        $('#inputId').val('click !!');
    });
});
</script>
<div>
    <input type="button" value="button click" id="buttonId">
    <br>
    <br>
    <input type="text" id="inputId"/>
</div>

위의 코드는 buttonId를 클릭했을 때 inputId 요소에 텍스트 값을 설정하는 간단한 예제다.

먼저 jQuery 라이브러리를 사용하기 위해 CDN을 통해 jQuery를 간단히 연동한다.

id가 buttonId인 요소의 버튼을 클릭했을 때 실행될 함수를 정의하고, 버튼이 클릭되면 내부의 코드가 실행된다.
내부의 코드에서는 id가 inputId 요소에 'click !!' 텍스트를 설정한다.

실행 결과

위의 실행 결과와 같이 버튼 클릭시 input 요소에 'click !!' 텍스트가 정상적으로 설정된 화면이다.

---

click 이벤트 예제 소스 코드 2 (trigger와 clear)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    /**
     * button click 이벤트
     */
    $('#buttonId').click(function () {
        $('#inputId').val('click !!');

        // trigger click 실행
        $('#triggerButtonId').click();
    });

    /**
     * trigger click 이벤트
     */
    $('#triggerButtonId').click(function () {
        $('#triggerInputId').val('trigger click !!');
    });

    /**
     * clear click 이벤트
     */
    $('#clearButtonId').click(function () {
        // input 내용 초기화
        $('#inputId').val('');
        $('#triggerInputId').val('');
    });
});
</script>
<div>
    <input type="button" value="button click" id="buttonId">
    <input type="text" id="inputId"/>
</div>
<br>
<div>
    <input type="button" value="trigger button" id="triggerButtonId">
    <input type="text" id="triggerInputId"/>
</div>
<br>
<div>
    <input type="button" value="clear" id="clearButtonId">
</div>

위의 코드는 요소를 더 추가하고 클릭 이벤트의 응용과 이벤트 실행 후 clear하는 이벤트 처리까지 추가한 예제 코드다.

버튼은 세 종류로 buttonId, triggerButtonId, clearButtonId를 추가하였고, 각 이벤트 별로 조금씩 다른 이벤트 처리를 추가하였다.

첫 번째 버튼 클릭 이벤트
id가 buttonId 요소에 해당하는 버튼을 클릭하게 되면 inputId 요소에 'click !!' 텍스트를 추가하고, triggerButtonId에 해당하는 버튼 이벤트를 실행할 수 있도록 설정하였다. 여기서 $('#triggerButtonId').click() 이라고 코드를 실행하면 클릭 이벤트의 선언이 아닌 즉시 실행코드가 된다. 즉, 첫 번째 버튼 클릭 시 두 번째 버튼까지 트리거가 적용돼 한 번에 버튼 두 개가 실행되는 효과다.

두 번째 버튼 클릭 이벤트
id가 triggerButtonId에 해당하는 요소를 클릭하게 되면 triggerInputId 요소에 'trigger click !!' 텍스트를 추가하게 된다.

세 번째 버튼 클릭 이벤트
id가 clearButtonId에 해당하는 요소를 클릭하게 되면 inputId, triggerInputId 요소의 텍스트를 모두 초기화시켜주는 이벤트가 실행된다.

---

실행 결과

실행 결과는 위와 같이 trigger 적용과 clear 처리하는 부분까지 실행이 잘 되는 것을 확인할 수 있다.
trigger 적용하는 부분은 위의 소스와 같이 $('#triggerButtonId').click() 

click 이벤트에 handling 함수를 주지 않고 실행을 하게 되면 마우스의 click 없이 바로 실행이 된다.. 그러면 간단하게 trigger 연동 처리를 할 수가 있다.

---

click 이벤트 예제 소스 코드 3 (중복 방지)

/**
 * button click 이벤트
 */
$('#buttonId').unbind('click').click(function () {
    $('#inputId').val('click !!');

    // trigger click 실행
    $('#triggerButtonId').click();
});

/**
 * trigger click 이벤트
 */
$('#triggerButtonId').click(function (e) {
    e.preventDefault();

    $('#triggerInputId').val('trigger click !!');
});

/**
 * clear click 이벤트
 */
$('#clearButtonId').on('click', function () {
    // input 내용 초기화
    $('#inputId').val('');
    $('#triggerInputId').val('');
    return false;
});

위의 소스 코드는 클릭 이벤트 실행시 이벤트의 중복 방지를 위한 예제 코드다.


click 이벤트를 만들어서 사용하다 보면 종종 click 버튼을 한번 눌렀는데 두 번, 세 번, 네 번 … 점점 중복 실행이 늘어나는 현상이 발생한다. 보통 for문을 통해 한번에 click 이벤트를 발생시켰을 때 click 이벤트가 여러 개 생성되면 이런 현상이 나오게 된다.

첫 번째 버튼의 click 이벤트 앞에 .unbind('click') 이벤트를 먼저 주고 이어서 click 이벤트를 주었다.
개발을 하다 보면 click 이벤트 중복 발생이 빈번하게 발생한다. 이럴 때 위의 unbind 처리를 해주면 이전에 실행했던 click 이벤트를 unbind처리하고 다시 새로 click 이벤트를 주게 된다.. click 할 때마다 새로운 click 이벤트가 실행되는 것이다.

두 번째 버튼은 click 이벤트 실행 후 handling 함수 안에 preventDefault 이벤트 함수를 실행시켰다. 이 부분도 첫 번째와 동일하게 이전 이벤트를 방지해 줄 수 있는 이벤트에 해당된다.

세 번째는 click 이벤트를 .on() 함수에 넣고 실행을 하였다. 실행 결과는 동일하고 조금 다른 방법으로 주는 것이며, 이벤트의 마지막에 return false; 구문을 추가하였다. 이 내용은 첫 번째 두 번째와 모두 같은 맥락이라고 볼 수 있다.

 

---

click 이벤트 사용 시 주의사항

jQuery의 click 이벤트 사용 시 주의해야 할 사항들이 있다. 동적인 이벤트다보니 주의 사항들을 점검해 보고 이벤트 기능을 구현하는 것이 좋다.

DOM 로드 확인
jQuery를 사용하여 click 이벤트를 생성할 때, DOM이 완전히 로드된 이후에 이벤트를 설정해야 한다. 그래서 보통 jQuery를 사용할 때에는 $(document).ready() 또는 $(function(){}) 함수 내에서 이벤트를 실행하게 된다. 이렇게 하지 않는다면 DOM이 완전히 생성되기 전에 이벤트가 선언되므로 요소를 찾지 못해 이벤트가 생성되지 못하게 된다.

이벤트 위임 활용
대규모 애플리케이션에서는 이벤트 위임을 활용하여 이벤트 처리 성능을 최적화할 수 있다. 이벤트 위임은 하위 요소에 이벤트를 설정하는 것이 아니라 상위 요소에 이벤트를 설정하고, 이벤트가 발생한 요소를 확인하여 처리하는 방식이다. 이를 통해 동적으로 추가되는 요소에 대해서도 일일이 이벤트를 설정할 필요가 없어진다.

중복 이벤트 주의
같은 요소에 여러 개의 이벤트가 발생하지 않도록 주의해야 한다. 각 이벤트 핸들러가 의도대로 실행되는지 확인해야 하며, 중복된 이벤트 핸들러가 있을 경우 비정상적인 동작이 실행될 수 있다. 이를 확인하기 위해서 브라우저의 콘솔창을 활용해 해당 이벤트가 원하는 만큼 실행되는지 확인하는 것이 좋다.

이벤트 해제
이벤트 핸들러를 제거하는 것이 필요한 경우도 종종 있다. 특히 페이지를 이동하거나 요소를 제거하는 경우에는 불필요한 이벤트 핸들러가 메모리를 차지하게 되고 성능을 저하시킬 수 있다. jQuery의 off() 메서드나 unbind() 메서드를 통해서 이벤트 핸들러를 해제시켜 줄 수 있다.

성능 고려
대규모 애플리케이션에서는 이벤트 처리의 성능이 매우 중요한데, 가능하다면 이벤트 핸들러를 최소한으로 유지하고, 이벤트 위임 등의 방법을 활용하여 성능을 최적화해야 한다.

이벤트 버블링과 캡처링
이벤트 버블링과 캡처링은 이벤트가 상위 요소에서 하위 요소로 전파되는 방식을 의미하는데, 이를 이해하고 활용하여 정상적인 동작을 구현하는 것이 중요하다.

브라우저의 호환성
jQuery를 사용할 때에는 브라우저의 호환성을 고려해야 한다. jQuery는 대부분의 브라우저에서 잘 동작하지만, 특정 브라우저에서는 비정상적으로 문제가 발생할 수 있으므로, 개발 대상 서비스의 브라우저 버전을 고려하는 것이 중요하다.

---

마무리

오늘은 이렇게 jQuery의 click 이벤트 실행방법과 중복에 대한 처리 방법을 정리해 보았다. 요즘은 다양한 프론트엔드 라이브러리가 나오면서 다양성이 많아졌지만 click 이벤트의 맥락은 거의 대부분 비슷하고, 모든 이벤트는 자바스크립트가 기반이 되기 때문에 jQuery를 통해서 이벤트를 정리해 보았다. 프로그램을 배우는 것은 가장 기본이 되는 부분을 잘 다뤄야 응용된 라이브러리나 기술을 손쉽게 다룰 수 있기 때문에 기본을 잘 다지는 것이 중요하다.



* 예제 소스 코드 첨부

click.html

0.00MB

* javascript preventDefault 이벤트
https://sancode.tistory.com/19

[javascript] 이벤트 전파 막기 (preventDefault, stopPropagation)

---