소프트웨어 개발 업데이트 #13: DOM 이벤트

10320 단어 beginnersjavascriptwebdev


이번 업데이트에서는 DOM을 더 깊이 파고들어 이벤트에 대해 논의할 것입니다. MDN에는 실제로 a great introduction 주제가 있으며 내 게시물과 함께 확인하는 것이 좋습니다.


DOM 이벤트



Events은 사용자가 하는 일에 응답하여 무엇이든 하는 모든 종류의 대화형 웹 사이트를 만드는 데 핵심입니다.

  • Inline Events : "onclick=""이라는 속성을 추가할 수 있는 HTML 요소에 직접 작성됩니다. onfocus, onpause, ondrag 등과 같은 다른 속성이 있습니다. 권장 사항이 아닙니다.
    HTML 요소에 JS를 추가하는 방법이지만 옵션입니다. 또한 기능은 하나의 HTML 요소에만 적용되며 해당 기능/작업을 수행하려는 모든 요소에 대해 코딩해야 합니다.

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Events</title>
</head>
<body>
    <h1>Inline Events</h1>
    <button onclick="alert('You clicked on me!'); alert('Stop clicking me!')">Click Me!</button>
</body>
</html>



  • onclick : 요소를 클릭할 때 실행할 일부 스크립트를 지정합니다.

    • function scream(){
    console.log("AHHHH!");
    console.log("I wasn't expecting that!");
}

btn.onmouseenter = scream;

document.querySelector("h1").onclick = function(){
    alert("You clicked the h1!");
}



  • addEventListener : 지정된 이벤트가 발생할 때마다 호출될 함수를 설정합니다.

    • const button = document.querySelector('h1');

button.addEventListener("click", () => {
    alert("You clicked me!")
})


  • 실습: 이벤트 및 키워드 This

  • Keyboard Events & 이벤트 객체: 이벤트 객체는 콜백을 사용할 때마다 자동으로 전달되며 객체에 대한 정보를 포함합니다. Key value은 눌린 실제 키 문자를 원하는 경우에 사용됩니다. Code value은 키의 물리적 위치에 사용되며 특정 언어가 아닙니다. (게임 또는 이와 유사한 것을 위한 WASD)

    • document.querySelector('button').addEventListener('click', (event) => {
    console.log(event);
})

const input = document.querySelector('input');
input.addEventListener('keydown', (event) => {
    // console.log("Key Down")
    console.log(event);
    console.log(`Key: ${event.key}`);
    console.log(`Code: ${event.code}`);
})

//We can also look at the window for key presses and not just an input
// window.addEventListener('keydown', (event) => {
//     console.log(event.code);
// })


  • Form Events & Prevent Default : 양식의 기본 동작은 action=""를 사용하여 HTML에서 설정할 수 있습니다. 양식의 기본 동작은 입력한 모든 데이터를 action=""를 사용하여 설정한 위치에 제출하고 해당 새 페이지로 이동하는 것입니다. 이는 event.preventDefault 메서드로 재정의할 수 있습니다.

  • Input & Change 이벤트: input, select 또는 textarea 요소의 값이 변경되면 입력 이벤트가 트리거됩니다. 변경 이벤트는 사용자가 요소 값에 대한 변경을 커밋할 때 입력, 선택 및 텍스트 영역 요소에 대해 트리거되지만 변경되는 요소의 종류와 사용자 방식에 따라 요소 값에 대한 각 변경에 대해 반드시 발생하지는 않습니다. 요소와 상호 작용
  • 이벤트 버블링: 다른 이벤트 내에 중첩된 이벤트가 트리거되면 상위 이벤트도 트리거됩니다. .stopPropagation을 사용하면 이벤트 버블링이 중지됩니다.

  • Event Delegation : 이벤트 리스너를 적용할 요소의 상위 요소에 추가할 수 있습니다. 이렇게 하면 하위 요소가 페이지가 로드된 후에 생성된 경우에도 항상 이벤트 리스너에 액세스할 수 있습니다.


    • 주간 검토




    이것으로 부트캠프의 DOM 특정 섹션을 마무리하고 특히 이벤트 버블링 및 위임과 같은 일부 주제가 더 명확해지기를 바랍니다. 때로는 정의를 읽는 것보다 실제로 보는 것이 더 유익하기 때문에 예제를 제공했습니다!

    Bootcamp 수업 완료: 272/579


    즐겁게 읽으셨기를 바랍니다!

    GitHub에서 저를 팔로우하고 더 많은 정보를 얻으십시오!
    CSS 그리드: 반복 기능 - 기초
    2D 배열에서 요소의 좌표 찾기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage