[JavaScript] 이벤트 (6)

자바스크립트의 주된 용도는 화면에 생동감을 주기위해, 다시말해서 화면에 사용자에 입력 또는 정해진 딜레이에 맞춰서 내가 만들어 놓은 정적의 시각적 화면인 html 화면에 동적처리를 위한 것이다.

 

이중에서도 사용자에 입력은 여러가지 형태에 "이벤트"로, "이벤트리스너"가 해당 이벤트가 발생하면 그에 맞춰서 어떤 화면작업을 해줄지 코드구현이 가능하다.

 

여기서 "이벤트리스너" 호출 방법 및 사용자의 어떤 입력을 "이벤트"로 받아들여서 처리하는지에 대해서 알아보겠다.

 

---

 

[이벤트 처리]

 

1. onclick 속성을 통한 해당 요소의 이벤트 처리

html에 태그 속성중에 onclick 속성을 사용해서 이벤트 처리가 가능하다. 다음 예시를 살펴보자

html

 

JavaScript

 

 

다음 html 코드를 살펴보면 3개의 태그 (button, a, div) 에 대해서 각각 버튼을 만들어 주었다. 그리고 속성에 onclick을 통해서 각각에 메서드를 지정해주었다.

 

웹 화면

화면 출력은 다음과 같으며 onclick 속성으로 넣어둔 각각의 메서드는 자바스크립트에서 선언되어있다.

메서드(f01, f02, f03)들은 각각 자신의 번호가 클릭되었다고 console.log()로 출력하고있다. 각각의 태그요소를 클릭하고 결과를 확인해보자.

 

결과출력(콘솔창)

 

해당 요소를 클릭하게되면 다음과 같이 onclick 속성에 할당된 메서드가 실행되게된다. onclick은 해당 요소에 대해서 클릭이라는 이벤트에 대한 처리를 담당하는 속성으로 각 태그가 html 화면에서 담당하고있는 범위를 클릭했을 경우에 할당된 메서드가 작동하게 된다.

 

여기서 메서드가 짧다면 태그 내에서 인라인 형식으로 처리가 가능하다

인라인 이벤트 핸드러 예시

 

인라인으로 처리 결과

 

2. addEventListener()를 통한 요소의 이벤트 처리

onclick()을 통해서 처리를 하게 되면, 태그요소에 "클릭"이라는 이벤트에 대해서만 처리가 가능하고 단 하나의 메서드에 대해서만 작동하게 된다. 하지만 addEventListener를 사용하게 되면 하나의 태그에 대해서 이벤트에 여러 핸들러 처리가 가능하다. 그리고 나중에 배울 이벤트전파(event propagation) 개념에 있어서 버블링과 캡쳐링이라는 용어가 있다. 버블링과 캡쳐링 단계를 제어할 수 있는 기능도 포함되어있다.

 

onclick은 각 태그에 함수를 지정해주었다면, addEventListener()는 자바스크립트에서 html 태그요소를 참조해서 처리하므로 유지보수가 용이하다는 장점을 가진다. 기능이 좋은 addEventListener()에 대해서 예제코드를 알아보자.

 

html

JavaScript

 

 코드를 확인해보자 bnt1 이라는 변수에는 document.querySelector() 메서드를 통해서 인자에 선택자를 통한 html 요소를 골라서 반환한다. bnt1에는 01버튼 값이 들어가있는 button 태그가 담기게 되며, 

해당 요소에 addEventListener메서드를 통해서 첫번째 인자로 어떤 이벤트(클릭)이 되면 두번째 인자인 함수(console.log()) 를 실행한다. 함수를 적는 방식으로는 화살표함수, 또는 함수를 정의해서 바로 실행이 가능하다.

 

 

[onclick return을 통한 이벤트 제거]

 

항상 이벤트에 대해서 핸들러로 함수를 사용하게 된다. 함수에는 return이 가능한데 반환으로 false 를 반환하면 이벤트 제거 처리가 가능하다. 다음 코드를 살펴보자

 

 

해당 코드는 a에 속성으로 href에 네이버 url 링크를 설정해두고 onclick 속성으로는 test01() 메서드의 결과를 return 하도록 하고있다.

 

test01메서드는 다음과같이 confirm 메서드를 통해서 사용자 응답이 true인지 false인지를 판별하고 반환한다. onclick="return test01()"에서 return은 브라우저의 이벤트 처리 로직에게 전달하게 되고, 기본 동작을 허용할지 기본 동작을 취소할지에 대해서 판별한다.