1. 이벤트 핸들러 등록
인라인 이벤트
인라인으로 이벤트를 등록하는 방식은 주로 리액트와 같은 라이브러리에서 사용된다.
<!DOCTYPE html>
<html>
<body>
<button class="btn" onclick="myHandler()">Click me</button>
<script>
function myHandler() {
alert('Button clicked!');
}
</script>
</body>
</html>이벤트 핸들러 프로퍼티
const btn = document.querySelector(".btn")
// onclick 속성 방식
btn.onclick = function () {
alert("Button clicked 1")
}
// addEventListener 메소드 방식
btn.addEventListener("click", function () {
alert("② Button clicked 1")
})
2. 이벤트의 흐름
HTML에서 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 전파되는 방향에 따라 버블링(Event Bubbling)과 캡처링(Event Capturing)으로 구분된다.
이벤트가 발생했을 때, 버블링과 캡처링 둘 중 하나만 발생하는 것이 아니라 캡처링부터 시작하여 버블링으로 종료된다.
캡처링(Event Capturing)
일반적으로 버블링만 알고 있지 캡처링을 접하기는 쉽지 않다.
자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것을 캡처링이라 한다.
버블링(Event Bubbling)
자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 버블링이라 한다.
3. 디바이스의 방향 정보를 다루는 이벤트
Device Orientation는 HTML5가 제공하는 매우 유용한 기능으로 중력과의 관계에서 디바이스의 물리적 방향의 변화를 감지한다.
window.addEventListener('deviceorientation', handleOrientation, false);
function handleOrientation(event) {
var absolute = event.absolute; // 지구좌표계를 사용하는 지에 대한 boolean 값
var alpha = event.alpha; // 0도부터 360도까지 범위의 z축을 중심으로 디바이스의 움직임을 나타낸다.
var beta = event.beta; // x축을 중심으로 디바이스의 움직임을 나타낸다
var gamma = event.gamma; // y축을 중심으로 디바이스의 움직임을 나타낸다.
}
작은 성취들이 모여 큰 결과를 만든다고 믿으며, 꾸준함을 바탕으로 개발 역량을 키워가고 있습니다