[js] 3. 이벤트 리스너

Sep 05, 2024


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <button onclick="alert('Hello World!')">Click me</button>
    
    <button id="myBtn">Click me</button>
    <script>
        const myBtn = document.querySelector("#myBtn");
        myBtn.addEventListener("click", function () {
            alert("Hello World!");
        });
    </script>
</body>

</html>

click : 요소를 클릭할 때 발생합니다.

dblclick : 요소를 더블 클릭할 때 발생합니다.

mousedown : 요소에서 마우스 버튼이 눌릴 때 발생합니다.

mouseup : 요소에서 마우스 버튼이 떼어질 때 발생합니다.

mousemove : 요소에서 마우스가 움직일 때 발생합니다.

mouseover : 요소에 마우스 커서가 올라갈 때 발생합니다.

mouseout : 요소에서 마우스 커서가 벗어날 때 발생합니다.

keydown : 키보드에서 키를 누를 때 발생합니다.

keyup : 키보드에서 키를 뗄 때 발생합니다.

submit : 폼을 제출할 때 발생합니다.

change : 요소의 값이 변경될 때 발생합니다.

load : 웹 페이지나 이미지 등이 로딩되었을 때 발생합니다.