자바스크립트 이벤트
자바스크립트 DOM 타겟 이벤트 메소드 활용하기
자바스크립트 DOM에서는 target 이벤트 메소드를 사용하여 이벤트가 발생하는 요소에 접근할 수 있습니다. 아래의 코드는 클릭 시 해당 이벤트를 수신한 클래스 이름을 출력합니다. document.addEventListener('click', function myFunction(e) { console.log(e.target.getAttribute('class')); }) 또는 아래와 같이 target.nodeName을 통해 노드의 이름에 접근할 수도 있습니다. 이외에도 부모 노드(parentNode), 자식 노드 리스트(childNodes), 첫 번째 자식 노드(firstChild), 마지막 자식 노드(lastChild) 등에도 접근할 수 있습니다. document.addEventListener('cli..
[JavaScript] ⑦ 자바스크립트 DOM 이벤트 핸들링
이벤트(event)란 애플리케이션에서 발생하는 사용자의 마우스 클릭 click, 키보드 입력 keydown 등과 같은 활동이며, 이벤트 드리븐 프로그래밍(Event-driven Programming)은 이러한 이벤트를 중심으로 프로그램을 제어하는 방식을 일컫는다. 이벤트 핸들러란? 특정한 이벤트가 발생했을 때, 호출되는 코드(대부분의 경우 함수)를 이벤트 핸들러(Event Handler)라 한다. 아래의 코드는 클릭 시 배경 색상을 임의로 바꾸는 이벤트 핸들러를 구현한 것이다. 이벤트 핸들러 추가는 어트리뷰트 방식, 프로퍼티 방식, addEventListener메서드 방식으로 할당할 수 있는데, 오늘날에는 addEventListener 방식을 가장 많이 사용한다 아래 버튼 클릭 시 이벤트 리스너의 cli..
