SeouliteLab

jQuery의 click 이벤트 핸들러 활용하기 본문

프로그래밍

jQuery의 click 이벤트 핸들러 활용하기

Seoulite Lab 2024. 3. 27. 08:18

예제 1: 버튼 클릭 시 알림창 띄우기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery click 이벤트 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="myButton">Click me!</button>

<script>
    // 버튼 클릭 이벤트 핸들러
    $("#myButton").click(function() {
        alert("버튼이 클릭되었습니다!");
    });
</script>

</body>
</html>

출력 결과: (버튼 클릭 후 알림창이 뜸)

설명

위 예제는 jQuery의 click() 메서드를 사용하여 버튼 클릭 이벤트를 처리하는 예제입니다. 버튼이 클릭되면 알림창이 뜨도록 설정되어 있습니다. click() 메서드에는 클릭 이벤트가 발생했을 때 실행할 함수를 전달합니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 .innerHeight() 메서드: 요소의 내부 높이를 가져오기  (0) 2024.03.27
jQuery의 .height() 메서드: 요소의 높이를 가져오고 설정하기  (0) 2024.03.27
jQuery의 .css() 메서드를 활용하여 요소 스타일 변경하기  (0) 2024.03.26
jQuery의 반복문 - for 문 활용하기  (0) 2024.03.26
jQuery를 사용한 HTML 요소 동적 추가 - append 메서드  (0) 2024.03.26
'프로그래밍' Related Articles more