.png)
[JavaScript] 이벤트
- 이벤트(Events)는 웹 상에서 발생하는 사건들을 말한다. → 사용자가 화면을 클릭하거나 드래그하거나 윈도우의 사이즈를 줄이거나 하는 행위 등을 말한다.
- 이벤트를 통해 사용자와 웹페이지는 상호작용(Interaction)이 가능하게 된다.
이벤트 핸들러 등록
- DOM 요소를 기준으로 이벤트를 감지하고 원하는 작업을 수행할 수 있다.
addEventListener()
- 이벤트를 감지하고 동작을 실행할 수 있다.
- 첫 번째 매개변수로 이벤트 타입, 두 번째 매개변수로 실행할 함수(Event Handler)를 받는다. →
첫 번째 매개변수로 받은 이벤트가 발생하면, 두 번째 매개변수로 받은 함수가 실행된다.
<div>
<p>아래 버튼을 누르시면 경고창이 날아갑니다!</p>
<button>!경고!</button>
</div>const button = document.querySelector("button");
button.addEventListener("click", function onButtonClick () {
alert("경고합니다!");
});이벤트 종류
- 다양한 이벤트가 있며 필요에 따라 찾아서 적용할 수 있다.
Keyboard Event
- keydown : 키를 누르고 있을 때
- keyup : 누르고 있던 키를 뗄 때
- keypress : 키를 누르고 뗏을 때
Mouse Event
- click : 마우스 버튼을 클릭했을 때
- dbclick : 마우스 버튼을 더블 클릭했을 때
- mousedown : 마우스 버튼을 누르고 있을 때
- mouseup : 누르고 있던 마우스 버튼을 뗄 때
- mousemove : 마우스를 움직일 때
- mouseover : 마우스를 요소 위로 움직였을 때
- mouseout : 마우스를 요소 밖으로 움직였을 때
Focus Event
- input : input 또는 textarea 요소의 값이 변경되었을 때
- change : select box, checkbox, radio button의 상태가 변경되었을 때
- submit : form을 submit할 때
Clipboard Event
- cut : 콘텐츠를 잘라내기 할 때
- copy : 콘텐츠를 복사할 때
- paste : 콘텐츠를 붙여넣기 할 때
이벤트의 흐름
- 계층적 구조에서 이벤트가 발생하기 때문에 연쇄적인 반응이 일어난다.
- 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 버블링(Bubbling)이라 하고, 다시 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것을 캡처링(Capturing)이라 한다.
- addEventListener 메소드의 세 번째 매개변수에 true를 설정하면 캡처링으로 전파되는 이벤트를 인식하고, false 또는 미설정하면 버블링으로 전파되는 이벤트를 인식한다.
이벤트 객체
- 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 유용한 정보를 제공한다.
- 이벤트 핸들러를 선언할 때 이벤트 객체를 전달받을 첫 번째 매개변수를 선언해야만, 이벤트가 발생했을 때 이벤트 핸들러에 인자로 전달된다.
button.addEventListener("click", function onButtonClick (ev) {
alert("경고합니다!");
});이벤트 프로퍼티
Event.target
- 실제로 이벤트를 발생시킨 요소를 가져오거나 수정할 수 있다.
Event.currentTarget
- 이벤트에 바인딩된 DOM 요소를 가져오거나 수정할 수 있다.
P.S.
사용자의 액션과 페이지의 변화를 알아서 인식하고 정보를 전달해 준다는 점에서 브라우저는 참 똑똑한 녀석이라는 생각이 들었다😆 이제 어느 정도 스스로 찾아보면서 동적인 페이지를 만들어 볼 수 있지 않을까🙃
