https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
이벤트 소개
이벤트는 프로그래밍 중인 시스템에서 발생하는 작업 또는 발생을 말한다.
행운의 연속
예를 들어, 공항에서 활주로가 이륙할 수 있을 때 조종사에게 신호가 전달됩니다. 결과적으로 비행기는 안전하게 이륙할 수 있습니다.
=>뭔가 표현이 적절한듯 조금 적절하지 않은듯 ㅋㅋ
웹의 경우 이벤트는 브라우저 창 내부에서 발생하고 그 안에 있는 특정 항목에 첨부되는 경향이 있습니다.
- 사용자가 특정 요소를 선택하거나 특정 요소 위로 커서를 이동합니다.
- 사용자는 키보드에서 키를 선택합니다.
- 사용자가 브라우저 창의 크기를 조정하거나 닫습니다.
- 웹 페이지 로드가 완료됩니다.
- 양식이 제출됩니다.
- 비디오가 재생, 일시 중지 또는 종료됩니다.
- 오류가 발생합니다.
응답할 수 있는 많은 이벤트가 있다
https://developer.mozilla.org/en-US/docs/Web/Events
사용 가능한 각 이벤트에는 이벤트가 실행될 때 실행되는 코드 블록(일반적으로 프로그래머가 생성하는 JavaScript 함수) 인 이벤트 핸들러 가 있습니다.이러한 코드 블록이 이벤트에 대한 응답으로 실행되도록 정의 되면 이벤트 핸들러를 등록 한다고 말합니다
=> 흠 ... 아 ... 이벤트 핸들러라고 이걸 부를 수 있군
간단한 예
https://github.com/2taesung/JSOfficialDoc
웹페이지 뿐만 아니라
=> 다른 언어들과 프레임워크들에도 이벤트가 존재한다 대신 문법들이 상당히 다르다
웹 이벤트 사용 방법
이벤트 핸들러 속성
인라인 이벤트 핸들러 — 사용하지 마세요.
=> 넵
처음에는 HTML과 JavaScript를 혼합하는 것은 좋은 생각이 아닙니다. 구문 분석이 어려워지기 때문입니다. JavaScript를 별도로 유지하는 것이 가장 좋습니다.
단일 파일에서도 인라인 이벤트 핸들러는 좋은 생각이 아닙니다. 버튼 하나면 괜찮은데 버튼이 100개라면? 파일에 100개의 속성을 추가해야 합니다. 그것은 곧 유지 보수의 악몽으로 변할 것입니다.
이벤트 핸들러 추가 및 제거
addEventListener()
해당 메소드 사용은 몇 가지 장점을 가짐
-
removeEventListener()이전에 추가된 이벤트 핸들러를 제거하는 대응 함수가 있습니다.
-
덮어써지지 않고 반복 가능
어떤 메커니즘을 사용해야 합니까?
addEventListener() 이거 써라
기타 이벤트 개념
이벤트 개체
=> 두루뭉실하게 알고 e 를 썼었는데 이렇게 확실하게 시간 들여서 알게 되니 너무 재밌다 evt랑 event로도 사용 가능
기본 동작 방지
=> 예상 했듯이 preventDefault와 관련되어 있는 듯
form이 항상 중요!
이벤트 버블링 및 캡처
=> 내용들이 빡세서 다음 포스팅으로
