[DOM]JavaScript로 클릭 및 마우스 이벤트 사용하기

클릭 이벤트로 텍스트 변경하기

 JavaScript함수 changeText는 클릭 이벤트를 통해 텍스트를 변경하는 역할을 합니다. 클릭하면 "클릭해 보세요" 텍스트가 "클릭하셨네요!"로 변경됩니다.

function changeText(event) {
    event.target.innerHTML = "클릭하셨네요!";
}

마우스 이벤트로 배경색 변경하기

마우스 이벤트 함수 'mouseOver'와 'mouseOut'는 마우스가 요소 위로 올라갔을 때와 나갔을 때 배경색을 변경하는 역할을 합니다.

function mouseOver(event) {
    event.target.style.backgroundColor = "orange";
}

function mouseOut(event) {
    event.target.style.backgroundColor = "skyblue";
}

HTML 요소에 이벤트 적용하기

해당 JavaScript 함수들은 HTML 요소에 이벤트를 적용하려면 아래와 같이 사용됩니다.

<h2 onclick="changeText(this)">클릭해 보세요</h2>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
    마우스를 올려보세요
</div>

위 코드에서는 'h2' 요소는 클릭이벤트로 텍스트를 변경하고 '<div>' 요소는 마우스 오버와 마우스 아웃 이벤트로 배경색을 변경합니다.