onclick 이벤트를 사용하여 JavaScript 함수 호출

  2. 어떻게
  3. JavaScript 하우투
  4. onclick 이벤트를 사용하여 JavaScript 함수 호출
Nithin Krishnan 2023년10월12일
JavaScript
  1. onclick 이벤트 핸들러를 사용하여 JavaScript 함수 호출
  2. 순수 JavaScript를 사용하여 HTML 요소에 JavaScript 함수 연결
  3. HTML 요소의 onclick 이벤트 핸들러에 대한 함수 정의
  4. addEventListener를 사용하여 JavaScript 함수 호출
onclick 이벤트를 사용하여 JavaScript 함수 호출

웹 페이지에 대한 정적 HTML 콘텐츠를 디자인하더라도 사용자 대화형으로 만들고 싶을 수 있습니다. HTML 요소는 기본적으로 벙어리입니다. <a> 태그는 사용자 대화형이지만 주로 특정 경로를 로드하는 데 사용됩니다. div와 같은 HTML 요소는 이벤트 핸들러를 추가하여 사용자 대화형으로 만들 수 있습니다. onclick 이벤트 핸들러라고 하는 이벤트 핸들러 중 하나에 대해 논의할 것입니다. HTML 요소에 추가할 수 있는 몇 가지 방법이 있습니다.

onclick 이벤트 핸들러를 사용하여 JavaScript 함수 호출

HTML의 onclick 이벤트 핸들러를 사용하거나 JavaScript의 이벤트 핸들러를 첨부하여 JavaScript 함수를 div에 바인딩할 수 있습니다. 이벤트 핸들러를 div 요소에 연결하는 다음 코드를 참조하십시오.

<div id="interactive-div" onclick="changeMyColor('interactive-div')" style="cursor: pointer;">Click me</div>

function changeMyColor(id) {
  var el = document.getElementById(id);
  el.style.color = 'blue';
}

div 요소는 기본적으로 클릭 이벤트를 허용하지 않습니다. 코드에서 JavaScript 함수 changeMyColor()를 div의 onclick 이벤트 핸들러에 바인딩합니다. 이제 div를 클릭할 수 있습니다. onclick 이벤트 핸들러를 div로 정의하더라도 사용자는 클릭하지 않는 한 div가 클릭을 허용하는지 여부를 알 수 없습니다. 사용자가 대상 div에 마우스를 가져가면 커서가 다르게 표시되는 좋은 UI/UX입니다. 이를 위해 인라인 스타일 style="cursor: pointer;"를 div 요소에 할당합니다. 사용자가 div를 가리키면 커서가 클릭 가능함을 나타내는 손 기호를 표시합니다.

function changeMyColor(id) {
  var el = document.getElementById(id);
  el.style.color = 'blue';
}

JavaScript 코드에서 div의 onclick 이벤트에 전달된 changeMyColor() 함수를 정의합니다. 이 함수는 div의 ID를 매개변수로 사용합니다. document.getElementById(id)를 사용하여 요소를 선택하고 el.style.color = "blue"; 라인을 사용하여 요소의 글꼴 색상을 blue로 변경합니다. 따라서 div에 JavaScript 기능을 할당하고 클릭 가능하게 만들었습니다.

순수 JavaScript를 사용하여 HTML 요소에 JavaScript 함수 연결

마지막 접근 방식에서는 HTML에서 onclick 이벤트 핸들러를 선언했습니다. HTML을 깨끗하게 유지하고 HTML에서 onclick 이벤트 핸들러를 지정하지 않고 div 또는 해당 HTML 요소에 JavaScript 기능을 첨부하는 방법이 있습니다. 여기에서는 HTML을 사용하지 않고 JavaScript에서 click 이벤트를 할당합니다. 따라서 이 접근 방식은 순전히 JavaScript 기반이며 HTML을 깨끗하게 유지합니다. 이러한 프로그래밍 스타일을 Unobtrusive JavaScript라고 합니다. 개념을 더 잘 이해하려면 다음 코드를 참조하십시오.

<div id="interactive-div" style="cursor: pointer;">Click me</div>

window.onload =
    function() {
  var el = document.getElementById('interactive-div');
  el.onclick = changeMyColor;
}

function changeMyColor() {
  var el = document.getElementById('interactive-div');
  el.style.color = 'blue';
}

위의 코드를 참조하여 HTML을 이전 코드 샘플과 유사하게 유지했습니다. HTML에 onclick 이벤트 핸들러를 추가하지 않았습니다. 대신 JavaScript에서 onclick 이벤트 핸들러를 정의하고 JavaScript 코드에서 동일한 기능 changeMyColor를 첨부했습니다. 여기서 주의할 사항이 몇 가지 있습니다.

  • window.onload 내부에 onclick 이벤트 리스너를 첨부합니다. window.onload 메소드를 사용하지 않으면 Uncaught TypeError: Cannot set property 'onclick' of null이라는 오류가 발생합니다. 이것은 HTML이 로드되는 동안 document.getElementById("interactive-div")가 id interactive-div가 있는 요소를 쿼리하려고 하기 때문에 발생합니다. <script> 태그가 <head> 섹션에 있으므로 JavaScript 코드는 <body> 태그에 있는 div를 실제로 로드하기 전에 <script> 태그 내용을 실행합니다. 따라서 getElementById() 함수는 요소를 찾지 못하고 null을 반환합니다. 따라서 onclick을 null로 설정할 수 없다는 오류가 발생합니다.
  • 주목해야 할 또 다른 점은 () 괄호 없이 onclick 이벤트 핸들러에 함수를 할당한다는 것입니다. el.onclick = changeMyColor();를 작성하면 el.onclick = changeMyColor; 대신, 우리가 원하지 않는 HTML 로드 시 함수를 실행합니다. 따라서 changeMyColor의 함수 참조를 onclick 이벤트 핸들러에 전달합니다. 사용자가 div를 클릭하여 onclick 이벤트를 트리거하면 changeMyColor 함수 호출이 발생합니다. 그리고 div가 파란색으로 바뀝니다.

HTML 요소의 onclick 이벤트 핸들러에 대한 함수 정의

onclick 이벤트에서 JavaScript 함수를 호출하는 몇 가지 방법이 더 있습니다. HTML에서 메소드를 정의할 수 있습니다. 그러나 HTML을 지저분하게 만들기 때문에 권장하지 않는 방법입니다. 더 잘 이해하려면 다음 코드를 참조하십시오.

<div onclick="(function() { alert('hello there'); })()" style="cursor: pointer;">click me!</div>

div를 클릭하면 위의 코드가 hello there 텍스트를 팝업합니다. 여기에서 HTML에 함수 정의를 인라인으로 코딩합니다. 익명 인라인 메서드입니다. 그리고 연결된 이름이 없기 때문에 다른 곳에서 동일한 기능을 사용할 수 없습니다. 더 긴 함수 정의는 번거롭고 코드 가독성을 떨어뜨립니다.

addEventListener를 사용하여 JavaScript 함수 호출

onclick 이벤트 핸들러를 추가하는 한 가지 방법은 .onclick() 함수를 사용하는 것입니다. 보다 일반적이고 더 많은 이벤트 리스너를 추가하는 데 사용할 수 있는 또 다른 방법이 있습니다. 이를 위해 JavaScript의 .addEventListener() 함수를 사용합니다. 이 기능은 element, document 인터페이스 또는 window 개체에서 사용할 수 있습니다. .addEventListener() 함수를 사용하여 특정 event가 트리거될 때 메서드 호출을 설정할 수 있습니다.

  • 매개변수: 이벤트 유형(예: click 등)과 listener 기능과 같은 몇 가지 필수 매개변수가 필요합니다. listener 기능은 이벤트가 트리거될 때 실행됩니다.
  • 사용법: 다음 코드를 참조하십시오.
<div style="cursor: pointer;" id="interactive-div">click me!</div>

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('interactive-div')
      .addEventListener('click', function() {
        alert('hello');
      });
});

이 코딩 스타일은 순전히 JavaScript 기반의 눈에 거슬리지 않는 JavaScript 프로그래밍입니다. 여기에서 .addEventListener() 함수를 사용하여 click 리스너를 추가했으며 이것이 작동하려면 .getElementById("interactive-div")가 요소를 반환하는지 확인해야 합니다. 따라서 document 인터페이스의 DOMContentLoaded 이벤트 리스너에서 코드를 래핑합니다. 그렇지 않으면 코드에서 null 개체에 event를 추가할 수 없다는 오류가 발생합니다.