[JS 초보] document.getElementById 와 addEventListener

electron 개발을 하면서

기본적으로 html과 JS 간의 상호작용이 필요할 때가 있다.

바로 이럴때 빈번하게 쓰이는 document.getElementById 와 addEventListener에 대해서 알아보자.

---

html의 요소를 가져와서 사용하고 싶을 때 해당 요소를 가지고 오려면

document.getElementById를 사용하면 된다.

 

상황을 설정해서 만약 html에서 result라는 버튼이 있고,

그 버튼을 눌렀을때 "결과"이라는 글씨가 바뀌어야 한다고 하자.

<button id="result">결과</button>
<h3 id="set">정답?</h3>

// document.getElementById('id')를 이용해서 해당 html을 정의해주고
const result = document.getElementById('result');
const set = document.getElementById('set');

// addEventListener를 통해 다양한 상황의 이벤트 리스너를 사용할 수 있다.
result.addEventListener('click', () => {
    set.innerText = '정답!'
})

이런 식으로 간단하게

버튼 누름 -> 텍스트 바뀜을 사용할 수 있다.

---

QT 같은 예전 GUI제작 툴을 사용할 때 Signal/Slot을

일일이 지정해줘서 사용하기 불편했었는데

너무 간단하고 다양한 addEventListener가 있으니 좋다.