JavaScript로 onClick 설정

Tahseen Tauseef 2023년1월30일
  1. JavaScript의 이벤트 및 EventListener란 무엇입니까?
  2. JavaScript의 요소에 onClick EventListener를 추가하는 방법
  3. JavaScript에서 onClick EventListener에 요소 참조를 전달하는 방법
  4. JavaScript에서 onClick EventListener를 Jquery에 추가하는 방법
JavaScript로 onClick 설정

이 튜토리얼에서는 JavaScript를 사용하여 onClick 리스너를 요소에 연결하는 방법에 대해 설명합니다. 우리는 논의 할 것이다:

  • JavaScript에서 이벤트 및 EventListener 또는 EventHandler란 무엇입니까?
  • 요소에 onClick EventListener를 추가하는 방법
  • onClick EventListener에 대한 참조를 전달하는 방법
  • Jquery를 사용하여 onClick EventListener를 추가하는 방법

JavaScript의 이벤트 및 EventListener란 무엇입니까?

이벤트는 브라우저나 최종 사용자가 하는 것입니다. 이러한 이벤트는 이벤트 핸들러 또는 이벤트 리스너라는 JavaScript 개념으로 처리할 수 있습니다. 이벤트 리스너는 특정 이벤트가 발생할 때 실행됩니다.

onClick은 이러한 이벤트 리스너 중 하나입니다. onClick 이벤트 리스너는 사용자가 요소를 클릭할 때 트리거/실행됩니다.

JavaScript의 요소에 onClick EventListener를 추가하는 방법

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement" onclick="ChangeColor()">
            Change Color to Red
        </div>
        <script>
            function ChangeColor() {
              document.getElementById("textElement").style.color = "red";
            }
        </script>

    </body>
</html>

위의 코드는 ChangeColor 메소드를 트리거/실행합니다. 이 메소드는 ID가 textElement이고 텍스트 색상을 빨간색으로 변경하는 Document 개체 모델을 사용하여 요소에 액세스합니다.

onClickclass, id 등과 유사한 HTML 요소의 속성으로 설정됩니다.

또는 JavaScript를 사용하여 요소의 onClick 속성을 직접 설정할 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement">
            Change Color to Red
        </div>
        <script>
          document.getElementById("textElement").onclick = function() {
             document.getElementById("textElement").style.color = "red";
          };
        </script>

    </body>
</html>

이렇게 하면 textElement에 액세스하고 function을 할당합니다. 이 function은 사용자가 HTML 요소를 클릭할 때 실행되며 결과는 비슷합니다. 예를 들어, textElementid가 있는 요소의 색상은 빨간색으로 변경됩니다.

또한 JavaScript 요소의 addEventListener 메소드/기능을 사용하여 동일한 기능을 수행할 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement">
            Change Color to Red
        </div>
        <script>
            let element = document.getElementById("textElement");
             element.addEventListener("click", function(){
                 element.style.color = "red";
             });
        </script>

    </body>
</html>

addEventListener는 두 개의 인수를 사용합니다. 첫 번째는 HTML 요소에서 수신 대기할 이벤트 유형이고 두 번째는 특정 이벤트가 발생할 때 실행할 콜백 함수입니다.

Internet Explorer를 사용하는 경우 호환성 문제로 인해 addEventListener가 작동하지 않습니다. 이 동작을 복제하려면 attachEvent를 사용하는 폴백을 사용해야 합니다.

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement">
            Change Color to Red
        </div>
        <script>
            let element = document.getElementById("textElement");
            if(element.addEventListener){
               element.addEventListener('click', function(){
                    element.style.color = "red";
               });
            }else if(element.attachEvent){
               element.attachEvent('onclick', function(){
                    element.style.color = "red";
               });
            }
        </script>

    </body>
</html>

JavaScript에서 onClick EventListener에 요소 참조를 전달하는 방법

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement" onclick="ChangeColor(this,'red')">
            Change Color to passed Color
        </div>
        <script>
           function ChangeColor(element,color) {
              element.style.color = color;
           }
        </script>

    </body>
</html>

예제에서 thisred라는 두 개의 인수를 전달하고 this는 DOM 요소에 대한 참조를 함수에 전달하지만 red는 단지 문자열입니다.

두 번째 인수만 변경하면 요소의 색상을 변경할 수 있음을 알 수 있습니다. 이 접근 방식은 다른 접근 방식에 비해 재사용성을 높입니다. 예를 들어, 여러 요소와 함께 ChangeColor 메서드를 사용할 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <div id="textElement" onclick="ChangeColor(this,'red')">
            Change Color to Red
        </div>
        <div id="textElement" onclick="ChangeColor(this,'blue')">
            Change Color to Blue
        </div>
        <script>
           function ChangeColor(element,color) {
              element.style.color = color;
           }
        </script>

    </body>
</html>

JavaScript에서 onClick EventListener를 Jquery에 추가하는 방법

Vanilla JavaScript를 사용하지 않고 JavaScript 라이브러리인 Jquery와 같은 것을 사용하는 경우 프로세스는 유사합니다. 유일한 차이점은 구문입니다.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">	
    </script>
    
    <script>
    $(document).ready(function(){
      $("#textElement").click(function(){
        $(this).css('color','red')
      });
    });
    </script>
</head>
    <body>

    <div id="textElement">Change Color to Red</p>

    </body>
</html>

문서가 로드되자마자 textElementid가 있는 요소에 이벤트 리스너를 추가합니다.

관련 문장 - JavaScript EventListener