Programming Language/JavaScript

[JavaScript] 자바스크립트 onclick

자바스크립트 onclick

onclick은 JavaScript에서 HTML 요소에 사용되는 이벤트 속성 중 하나이다. 이 속성은 사용자가 해당 HTML 요소를 클릭할 때 실행되는 JavaScript 코드를 지정하는 데 사용된다.

onclick 함수를 사용하는 방법은 크게 3가지가 있다.

직접 함수 호출
익명 함수 사용
이벤트 핸들러 함수 등록

위의 3가지 방법에 대해 자세히 알아보는 시간을 가져보자.

직접 함수 호출

onclick을 사용하여 직접 함수를 호출하는 방법은 매우 간단하다. 아래의 해당 예제 코드를 살펴보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Direct Function Call</title>
</head>
<body>

<button onclick="sayHello()">Click me</button>

<script>
    // 클릭 시 호출될 함수
    function sayHello() {
        alert("Hello, world!");
    }
</script>

</body>
</html>

<button> 요소에 onclick 속성을 추가하고, 속성 값으로 클릭 시 호출될 함수인 sayHello()를 지정한다.
JavaScript 코드에서 sayHello() 함수를 정의하고, 이 함수는 클릭 시 "Hello, world!" 알림 창을 띄우도록 설정한다.

따라서 직접 함수 호출은 미리 정의해 놓은 함수를 요소의 onclick 속성의 값으로 설정하여 함수를 호출하는 방식이다.

이렇게 하면 해당 버튼을 클릭했을 때 sayHello() 함수가 직접 호출되어 원하는 동작을 수행하게 된다.

onclick 직접 함수 호출 방식의 또 다른 예제를 한 번 살펴보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Direct Function Call Example</title>
</head>
<body>

<button onclick="displayMessage()">Click me</button>

<script>
    // 클릭 시 호출될 함수
    function displayMessage() {
        let userName = prompt("Please enter your name:");
        if (userName) {
            alert("Hello, " + userName + "!");
        } else {
            alert("Hello, anonymous!");
        }
    }
</script>

</body>
</html>

첫 번째 예제와 마찬가지로 <button> 요소에 onclick 속성을 추가하고, 속성 값으로 클릭 시 호출될 함수인 displayMessage()를 지정한다.
JavaScript 코드에서 displayMessage() 함수를 정의하고, 이 함수는 사용자에게 이름을 입력받은 후 해당 이름을 포함한 인사 메시지를 표현한다.

이 예제에서는 클릭 시 사용자에게 이름을 물어보고, 입력된 이름이 있으면 해당 이름과 함께 인사 메시지를 표시하며, 이름이 입력되지 않았을 경우 "Hello, anonymous!"를 표시한다.

익명 함수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anonymous Function Example</title>
</head>
<body>

<button onclick="function() { alert('Hello, world!'); }">Click me</button>

</body>
</html>

<button> 요소에 onclick 속성을 추가하고, 속성 값으로 익명 함수를 직접 작성한다.
익명 함수 내부에는 클릭 시 실행될 코드가 포함되어 있다. 이 예제에서는 alert('Hello, world!')가 실행된다.

이 방법은 간단한 기능을 수행할 때 함수를 별도로 정의하지 않고 직접 작성할 수 있어 편리하다. 하지만 코드가 길어지거나 재사용성이 필요한 경우에는 별도의 함수를 정의하는 것이 더 유용할 수 있다.

이벤트 핸들러 함수 등록

onclick 이벤트 핸들러 함수를 등록하는 방법은 JavaScript에서 이벤트를 처리하는 일반적인 방법 중 하나이다. 아래에서 해당 방법에 대한 간단한 설명과 예제 코드를 한 번 살펴보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Event Handler Example</title>
</head>
<body>

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

<script>
    // 이벤트 핸들러 함수 등록
    document.getElementById("myButton").onclick = function() {
        alert("Button clicked!");
    };
</script>

</body>
</html>

<button> 요소에 id를 부여하고, JavaScript에서 해당 요소를 가져온다.
가져온 요소에 onclick 속성을 설정하여 클릭 시 실행될 함수를 등록한다.
등록된 함수에서는 간단한 alert 함수를 사용하여 "Button clicked" 메시지를 출력한다.

또한, 함수 내에서 다른 함수를 호출하는 것도 가능하다. JavaScript에서는 함수가 함수를 호출하는 것이 일반적이고 자주 사용되는 패턴 중 하나이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nested Function Example</title>
</head>
<body>

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

<script>
    // 외부 함수
    function outerFunction() {
        alert("Outer function called!");

        // 내부 함수 호출
        innerFunction();
    }

    // 내부 함수
    function innerFunction() {
        alert("Inner function called!");
    }

    // 이벤트 핸들러 함수 등록
    document.getElementById("myButton").onclick = function() {
        // 외부 함수 호출
        outerFunction();
    };
</script>

</body>
</html>

위의 예제에서는 버튼 클릭 시에 outerFunction이 호출되고, 그 안에서는 innerFunction이 호출된다. 함수 내에서 함수를 호출함으로써 코드를 모듈화 하고 재사용성을 높일 수 있다.

읽어주셔서 감사합니다.

728x90

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] geolocation API 기본 사용법(위치 정보 가져오기) (0)	2023.12.11
[JavaScript] 자바스크립트 window.open(), window.opener() (0)	2023.12.02
[JavaScript] 자바스크립트 addEventListener (0)	2023.11.17
[JavaScript] 자바스크립트 setTimeout()과 setInterval() 함수 (0)	2023.11.09
[JavaScript] 자바스크립트 Array 객체 (0)	2023.11.05

Contents

새소식

인기 검색어