반응형

이번 포스팅은 버튼에 클릭 이벤트를 추가하는 3가지 방법을 다룹니다. 권장하지 않는 방법부터, 권장되는 방법, 그리고 추가한 이벤트를 삭제하는 방법도 다룹니다. 우선 base HTML 코드는 아래와 같습니다.! 느낌표로 추가되는 기본 html 구성에 <div>를 쓰고, 그 안에 <button>을 추가한 코드입니다. 

Button event
Button event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <button>Button</button>
  </div>
</body>
</html>

HTML 태그 onclick

버튼 태그에 이벤트를 추가하는 방법으로 HTML <button> 태그에 onclick를 추가해주는 방법이 있습니다. button 여는 태그 안에 onclick를 쓰고, 클릭했을 때 사용하고 싶은 JavaScript 코드를 안에 문자열로 작성합니다. 이 방법으로 button에 이벤트를 연결하면, 코딩하기 쉽다는 장점이 있지만, HTML 코드에 JavaScript 코드가 들어가면서 깨끗하지 않은 코드를 만들고, 관리하기 어려워집니다. 따라서 이 방법은 권장되는 방법이 아닙니다. 

<button onclick="alert('Button clicked!');">Button</button>

JavaScript onclick 

먼저 위 방법이 권장되는 방법이 아니니, JavaScript코드를 JS 파일로 가져오도록 합시다. 이때 HTML 태그는 초기 상태입니다. JS코드에서 우선 button을 찾아야 합니다. querySelector 또는 getElementById를 사용하여 button html 태그를 찾습니다. 그다음으로 button.onclick = click 하면 실행되는 함수로 연결합니다. 

const button = document.querySelector('button');

const buttonClickHandler = () =>{
  alert('Button clicked!');
};

button.onclick = buttonClickHandler;

이 방법으로 코딩하면 JavaScript 파일과 HTML 파일을 서로 분리한다는 점에서 장점을 가지지만, 두 개 이상의 handler(함수)를 추가할 수 없다는 단점이 발생합니다. 만약에 두 가지 함수를 할당하면, 하나가 다른 하나의 값을 오버 라이딩해서 함수가 하나만 동작하게 됩니다. 따라서 이 방법도 권장되는 방법이 아닙니다. 

JavaScript addEventListner 

onclick을 사용하면 하나 이상의 함수를 할당할 수 없는데, addEventListner를 사용하면 여러 개의 함수를 실행시킬 수 있고, 추가한 이벤트를 삭제할 수도 있다는 장점을 가집니다. addEventListner를 사용하여 event처리를 하는 것이 권장되는 방법입니다. 

const button = document.querySelector('button');

const buttonClickHandler = () =>{
  alert('Button clicked!');
};

button.addEventListener('click',buttonClickHandler);
//button.removeEventListener('click', buttonClickHandler);
 

bind 사용한 이벤트 삭제하는 방법

const button = document.querySelector('button');

const buttonClickHandler = () =>{
  alert('Button clicked!');
};

const boundFunction = buttonClickHandler.bind(this);

button.addEventListener('click', boundFunction);
//button.removeEventListener('click', boundFunction);

 

 

eventListner에 추가할 때 bind함수를 사용했고, 그 이벤트를 삭제하고 싶다면, bind를 사용한 부분을 따로 변수로 만들어서 addEventListner에 추가해야 합니다. remove 할 때도 그 변수를 넣어 주어야 잘 동작합니다. bind함수를 쓰면 새로운 함수를 만들기 때문에, 그냥 사용하면 원하는 방식대로 삭제가 안됩니다.

반응형

'컴퓨터 IT > Javascript' 카테고리의 다른 글

자바스크립트 Bubbling  (0) 2022.12.19
자바스크립트 preventDefault 정리  (0) 2022.12.18
자바스크립트 getElementById, querySelector 차이점  (0) 2022.12.11
자바스크립트 static의 모든 것  (0) 2022.12.03
자바스크립트 클래스 Class의 모든 것  (0) 2022.11.30

티스토리툴바