자바스크립트 onclick

onclick은 자바스크립트에서 가장 많이 사용되는 이벤트 중 하나입니다. 이벤트는 특정 동작이나 상황이 발생했을 때 자동으로 실행되는 코드를 말합니다. onclick은 HTML 요소가 클릭되었을 때 실행되는 이벤트입니다.

 

사용법

 

onclick 이벤트를 사용하기 위해서는 HTML 요소에 onclick 속성을 추가하고, 그 값으로 실행하고자 하는 코드를 입력해야 합니다. 아래는 예시 코드입니다.

 

<button onclick="alert('Hello World!')">클릭하세요</button>

 

위 코드는 "클릭하세요"라는 문구가 적힌 버튼을 클릭하면 "Hello World!"라는 경고창이 뜨도록 설정한 것입니다.

 

하지만 위와 같은 방식은 코드가 길어지고 복잡해지면 유지보수하기 어려워질 수 있습니다. 대신 자바스크립트 파일에서 onclick 이벤트를 정의하는 것이 좋습니다.

 

<button id="myButton">클릭하세요</button>

 

const myButton = document.getElementById('myButton');
    myButton.onclick = function() {
    alert('Hello World!');
};

 

위 코드는 id가 "myButton"인 버튼을 클릭하면 "Hello World!"라는 경고창이 뜨도록 설정한 것입니다. 이 방식을 사용하면 자바스크립트 코드와 HTML 코드를 분리할 수 있어 유지보수가 용이해집니다.

 

하지만 onclick 이벤트를 이렇게 설정하면, 해당 요소에 다른 onclick 이벤트가 이미 설정되어 있다면, 새로운 이벤트로 덮어씌워져서 이전 이벤트가 실행되지 않습니다. 이러한 문제를 해결하기 위해서는 addEventListener 메서드를 사용해야 합니다.

 

<button id="myButton">클릭하세요</button>

 

const myButton = document.getElementById('myButton');
    myButton.addEventListener('click', function() {
    alert('Hello World!');
});

 

위 코드는 addEventListener 메서드를 사용해 onclick 이벤트를 정의한 것입니다. 이 방식은 기존의 이벤트를 덮어씌우지 않고, 새로운 이벤트를 추가할 수 있습니다.

 

이처럼 onclick 이벤트는 HTML 요소를 클릭할 때 실행되는 자바스크립트 코드를 정의하는 데 매우 유용한 이벤트입니다.