오늘 느낀 점
- 이벤트에 대해서 아~주 맛보기로 배웠는데 좀 재밌다. 좀 더 interactive요소가 추가되니까 확실히 더 active한 느낌이 든다. 앞으로 배워야할 게 산더미 같이 많지만 하나씩 차근차근 배워보는 걸루,,,🤪
Chapter3. 이벤트 객체
이벤트(Event)
- 브라우저에서의 이벤트는 DOM 요소와 관련이 있으며, 그 예시로 버튼 클릭이나 웹페이지 로드와 같은 상황을 떠올릴 수 있음
- 이벤트가 발생하면 브라우저는 이벤트를 감지하여 이벤트 발생을 통지함
→ 이를 통해 유저와 웹페이지가 상호작용(Interaction)할 수 있음
이벤트 핸들러(event handler)
이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행되는 함수
이벤트 핸들러 프로퍼티 방식
이벤트 핸들러 프로퍼티 당 오직 한 개의 이벤트 핸들러를 바인딩할 수 있음
<!DOCTYPE html>
<html>
<body>
<button class="btn">Click me</button>
<script>
const btn = document.querySelector('.btn');
<!--첫번째 이벤트 핸들러로, 실행이 안됨-->
btn.onclick = function () {
alert('Button clicked 1');
};
<!--두번째 이벤트 핸들러로, 실행이 됨-->
btn.onclick = function () {
alert('Button clicked 2');
};
</script>
</body>
</html>addEventListener 메소드 방식
<!DOCTYPE html>
<html>
<body>
<button class="btn">Click me</button>
<script>
const btn = document.querySelector('.btn');
<!--첫번째 이벤트 핸들러로, 작동 됨-->
btn.addEventListener('click', function () {
alert('Button clicked 1');
});
<!--두번째 이벤트 핸들러로, 작동 됨-->
btn.addEventListener('click', function () {
alert('Button clicked 2');
});
</script>
</body>
</html>