JavaScript를 사용하여 Div를 클릭 가능하게 만들기

Nithin Krishnan 2023년10월12일

JavaScript

onclick 이벤트 핸들러를 사용하여 Div를 클릭 가능하게 만들기
Div에 조건부 클릭 추가
클릭 가능한 Div에 기능이 있으면 좋습니다
클릭 가능한 Div로 앵커 요소 기능 달성

HTML의 <a> 태그(또는 앵커 요소)는 일반적으로 탐색 컨트롤에 사용됩니다. 배후에서 작동하는 자바스크립트 코드 없이 작동하는 클릭 가능한 태그입니다. 블록 요소가 아닙니다. 앵커 태그처럼 경로로 라우팅하기 위해 <div> 태그를 사용할 수 있습니까? 대답은 확실히 예입니다. 하지만 이에 대한 자바스크립트 코드를 작성해야 합니다. div 요소에 click 핸들러를 사용하여 클릭 가능하게 만들 수 있습니다.

`onclick` 이벤트 핸들러를 사용하여 Div를 클릭 가능하게 만들기

앵커 요소는 표시되는 인라인입니다. 그리고 이 기능은 그래픽 사용자 인터페이스를 디자인하는 동안 항상 우리에게 유리한 것은 아닙니다. div는 독립 실행형 블록 요소이므로 GUI를 설계하는 동안 사용하기 쉽습니다. div는 콘텐츠 분할 요소이며 기본적으로 클릭할 수 없습니다. 사용자가 요소를 클릭할 때 요소에서 발생하는 이벤트를 처리하기 위해 onclick 이벤트 핸들러를 사용해야 할 수도 있습니다. onclick 이벤트 핸들러는 함수 또는 함수 앞의 JavaScript 표현식을 허용합니다. 사용자가 div를 클릭하면 자바스크립트는 런타임에 관련 함수 또는 표현식을 실행합니다. div 요소에 onclick 이벤트 핸들러를 추가하는 몇 가지 방법이 있습니다.

HTML과 JavaScript 코드를 결합하여 Div를 클릭 가능하게 만들기

자바스크립트와 자바스크립트의 다양한 프레임워크에서 가장 널리 사용되는 접근 방식은 함수 호출을 HTML 코드의 onclick 이벤트 핸들러에 연결하는 것입니다. 그런 다음 자바스크립트 코드에 관련된 함수 정의를 작성합니다. 사용자가 div를 클릭하면 onclick 이벤트 핸들러는 div 요소의 onclick에 인수로 전달된 함수를 실행합니다. 다음 코드를 참조하십시오.

<div id="title-div" onclick="sayHello()"></div>

function sayHello() {
  console.log('Hello there !!');
}

사용자가 title-div를 클릭하면 연관 함수 sayHello()가 실행됩니다. 그리고 우리는 Hello there !!를 가질 것입니다. 웹 콘솔에 로그인했습니다. 이 접근 방식은 널리 사용되며 순수 자바스크립트 접근 방식에 비해 디버그하기 쉽습니다. HTML은 바인딩을 명시적으로 보여줍니다.

순수 JavaScript를 사용하여 `div`를 클릭 가능하게 만들기

또 다른 접근 방식은 순전히 자바스크립트 기반입니다. 먼저 document.getElementById(), document.getElementsByClassName(), document.querySelectorAll() 등과 같은 방법을 사용하여 원하는 HTML 요소를 찾습니다. HTML 요소를 찾는 데 가장 일반적으로 사용되는 방법은 document.getElementById()는 HTML에서 할당한 id를 기반으로 HTML 요소를 고유하게 식별하기 때문입니다. div 요소를 찾으면 onclick 이벤트 핸들러를 연결하고 div의 click 시 실행할 함수를 연결합니다. 다음 코드는 접근 방식을 잘 보여줍니다.

<div id="title-div">Click here</div>

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

function sayHello() {
  console.log('Hello');
}

위의 코드에서는 onclick 이벤트 핸들러를 순수하게 JavaScript로 바인딩합니다. HTML에서 onclick 매핑의 흔적이 없습니다. HTML은 div 요소와 연관된 id로 단순하게 유지됩니다. 또한 sayHello 함수 개체를 onclick 이벤트 핸들러에 할당했습니다. sayHello 대신 sayHello()(괄호 포함)를 연결하면 JavaScript가 window 로드 자체에서 함수를 실행하게 됩니다. 사용자가 div 요소를 클릭하면 아무 일도 일어나지 않습니다.

Div에 조건부 클릭 추가

조건부로 클릭 이벤트를 트리거할 수 있습니다. HTML 및 JavaScript 접근 방식을 사용하여 && 또는 ||와 결합된 표현식을 추가할 수 있습니다. 요구 사항에 따라 서명하십시오. JavaScript는 부울 표현식이 평가되는 방식에 따라 click 이벤트를 실행합니다. true로 평가되면 JavaScript는 연결된 함수를 실행합니다.

<div onclick="isEvenClick() && sayHello()">Click Here !!!</div>

function sayHello() {
  console.log('Hello');
}

function isEvenClick() {
  clickCounter++;
  return (clickCounter % 2 === 0)
}

위의 코드는 클릭 횟수가 짝수일 때만 Hello를 기록합니다. 다음 코드와 같이 isEvenClick() 함수 대신 식으로 동일한 코드를 작성할 수도 있습니다.

<div onclick="(++clickCounter % 2 === 0) && sayHello()" id="title-div">Click here</div>

표현식은 clickCounter 값에 대해 런타임에 평가됩니다. clickCounter가 짝수이면 (++clickCounter % 2 === 0) 표현식은 true로 평가되고 sayHello() 함수가 실행됩니다.

클릭 가능한 Div에 기능이 있으면 좋습니다

click 리스너를 div에 추가하면 여전히 div입니다. 사용자는 해당 HTML 요소에 연결된 사용자 상호 작용이 있는지 여부를 이해하지 못할 것입니다. 이를 위해 CSS 스타일을 사용하여 기능을 추가할 수 있습니다. 그 중 하나는 커서를 손 모양 아이콘으로 만드는 것입니다. cursor: pointer를 사용하여 이를 수행할 수 있습니다. 이 HTML 요소가 실행 가능하다는 것을 최종 사용자에게 암시하는 것은 좋은 UI/UX 관행입니다. 다음과 같은 방법으로 할 수 있습니다.

<div onclick="sayHello()" style="cursor: pointer;">Click Here !!!</div>

런타임에 요소에 스타일을 추가하여 순수 JavaScript를 사용하여 동일한 결과를 얻을 수 있습니다. 먼저 document.getElementById()를 사용하여 요소를 선택한 다음 el.style.cursor를 사용하여 커서 스타일을 추가하고 문자열 값 pointer를 할당합니다. 다음 코드는 그것을 설명합니다.

<div onclick="sayHello()">Click Here !!!</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.style.cursor = 'pointer';
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

클릭 가능한 Div로 앵커 요소 기능 달성

div 요소를 사용하여 anchor 요소를 모방할 수 있습니다. <a> 태그에는 하이퍼링크를 생성하는 href라는 속성이 있습니다. div의 onclick을 사용하여 동일한 동작을 모방할 수 있습니다. HTML 코드에서 click 이벤트를 캡처하는 기능을 연결합니다. 자바스크립트 코드에서 window.location.href 속성을 사용하여 URL을 div에 연결합니다. 다음 코드에서 기능을 관찰하십시오.

<div onclick="navToGoogle()" style="cursor: pointer;">Take me to Google</div>

function navToGoogle() {
  window.location.href = 'https://www.google.com';
}

onclick 이벤트 핸들러를 사용하여 Div를 클릭 가능하게 만들기