코딩스쿨

▶ HTML References

HTML Events

1. HTML Events란?

HTML Events는 웹 페이지에서 발생하는 사용자 인터랙션이나 브라우저의 동작을 나타냅니다.

2. 주요 HTML Events 유형

아래는 HTML에서 자주 사용되는 주요 이벤트 유형입니다:

이벤트 유형	설명	예시
`onclick`	요소가 클릭될 때 발생	`<button onclick="alert('버튼 클릭!')">클릭하세요</button>`
`onmouseover`	마우스가 요소 위로 올려질 때 발생	`<div onmouseover="this.style.backgroundColor='yellow'">마우스를 올려보세요</div>`
`onmouseout`	마우스가 요소에서 벗어날 때 발생	`<div onmouseout="this.style.backgroundColor=''">마우스를 떼보세요</div>`
`onkeydown`	키가 눌릴 때 발생	`<input type="text" onkeydown="console.log('키 눌림')">`
`onkeyup`	키가 올라올 때 발생	`<input type="text" onkeyup="console.log('키 올라감')">`
`onsubmit`	폼이 제출될 때 발생	`<form onsubmit="return validateForm()">...</form>`
`onchange`	요소의 값이 변경될 때 발생	`<input type="text" onchange="alert('값이 변경됨')">`
`onfocus`	요소에 포커스가 맞춰질 때 발생	`<input type="text" onfocus="this.style.backgroundColor='lightblue'">`
`onblur`	요소의 포커스가 해제될 때 발생	`<input type="text" onblur="this.style.backgroundColor=''">`
`onload`	페이지가 로드될 때 발생	`<body onload="console.log('페이지 로드됨')">`
`onresize`	브라우저 창의 크기가 변경될 때 발생	`<script>window.onresize = function() { console.log('창 크기 변경됨'); }</script>`

3. HTML Events의 사용법

HTML 이벤트는 태그의 속성으로 직접 정의하거나 JavaScript를 사용하여 이벤트 리스너를 등록하는 방식으로 사용할 수 있습니다.

예시 1: 태그 속성으로 이벤트 사용

<button onclick="alert('버튼 클릭!')">클릭하세요</button>

예시 2: JavaScript로 이벤트 리스너 등록

<button id="myButton">클릭하세요</button>

<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("버튼 클릭!");
    });
</script>

위 예시에서는 버튼 클릭 이벤트를 JavaScript를 사용하여 처리하고 있습니다.

4. 이벤트 객체

이벤트가 발생할 때 브라우저는 이벤트 객체를 생성합니다. 이 객체는 이벤트에 대한 정보를 포함하고 있으며, 이벤트 핸들러에서 이 객체를 사용하여 추가적인 작업을 수행할 수 있습니다.

예시:

<button id="myButton">클릭하세요</button>

<script>
    document.getElementById("myButton").addEventListener("click", function(event) {
        console.log("클릭한 위치:", event.clientX, event.clientY);
    });
</script>

위 예시에서는 클릭한 위치의 좌표를 출력합니다.

5. 이벤트 전파

이벤트는 DOM에서 상위 요소로 전파되는 "버블링"과 하위 요소로 전파되는 "캡처링"이라는 두 가지 방식으로 전파됩니다.

이벤트는 DOM에서 상위 요소로 전파되는 "버블링"과 하위 요소로 전파되는 "캡처링"이라는 두 가지 방식으로 전파됩니다. 이를 통해 개발자는 원하는 요소에만 이벤트를 처리하도록 설정할 수 있습니다.

예시: 이벤트 전파

<div id="parent" style="border: 1px solid black; padding: 20px;">
    부모 요소
    <button id="child">클릭하세요</button>
</div>

<script>
    document.getElementById("parent").addEventListener("click", function() {
        alert("부모 요소 클릭!");
    });

    document.getElementById("child").addEventListener("click", function(event) {
        alert("자식 요소 클릭!");
        event.stopPropagation(); // 이벤트 전파 중단
    });
</script>

위 예시에서 자식 요소를 클릭하면 자식 요소에 대한 경고가 먼저 발생하고, 부모 요소의 이벤트가 전파되지 않습니다.

코딩 스쿨 HTML