[JavaScript] 이벤트와 이벤트 핸들러, 이벤트 객체 event(e)
[JavaScript] 이벤트와 이벤트 핸들러, 이벤트 객체 event(e) 📌 이벤트란? `이벤트`(event)란 웹페이지에서 발생하는 사용자 상호 작용을 말한다. 웹 페이지에서 무언가가 일어났다! 라는 신호이다. 즉,
ramincoding.tistory.com
이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 함수, 주로 HTML요소의 이벤트 속성 (onclick, onchange 등)에 직접 함수를 할당하거나 자바스크립트에서 요소의 이벤트 속성(element.onclick)에 함수를 할당하여 사용
예를 들어
html
<button id="btn" onclick="handleClick()">클릭</button>
java scrtpi
const btnNode = document.getElementById("btn");
btnNode.onclick = function() {
console.log("버튼클릭");
};
이벤트 리스너는 addEventLister() 메서드를 사용하여 이벤트와 함수를 연결하는 방식
예를 들어
const btnNode=document.getElementById("btn");
btnNode.addEventListener("click", function () {
consol.log("버튼클릭");
});
이벤트 리스너는 이벤트 핸들러와 달리 하나의 요소에 여러개의 이벤트 리스너를 등록할 수 있다. 또한 removeEventListener()메서드를 사용하여 이벤트 리스너를 제거할 수 있다.
결론. 이벤트 핸들러와 이벤트 리스너는 이벤트 발생시 실행되는 함수라는 점에서 유사하지만 구현방식과 기능에서 차이가 있음.
이벤트 리스너가 더 유연하고 강력한 기능을 제공하지만 이벤트 핸들러도 여전히 많이 사용되고 있음
KPT 2번째
보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.
8naji.tistory.com
앞으로의 할일
- 주석처리, 변수명 등 남이 봐도 알아볼 수 있는 코드를 작성하도록 한다.
- 하루 30분~1시간은 개인공부를 한다.
- 팀원끼리 질문을 포함한 대화 시간을 하루에 규칙적으로 가지기.
- 개인 노트나 메모에 개발 전 프로세스 정리하기.
회고 : 오늘 팀프로젝트 발표를 했다. 마지막 까지 우여곡절이 많았지만,, 일단 끝났고 이번 팀에서는 팀장님의 권유로 만든 코드를 다시 읽어보는게 생각보다 흥미로웠다. 많이 몰랐던 부분을 쪼금 모르는 부분으로... 바뀌는 느낌🤣 리뷰하면서 남긴 코드와 더불어서 튜터님이 우리팀 포함해서 피드백 해주신 것에 대해 좀 더 자세히 찾아봐도 좋을 것 같다.