이벤트란 웹 브라우저 안에서 사용자가 실행하는 모든 동작!!
자바스크립트에서 이벤트가 작동될 수 있는 2가지 방법
1-1. HTML 태그에 직접 함수를 연결하는 방법
(간단한 함수이거나 / 내장함수일 때)
<태그 이벤트핸들러 = "함수명">
문제점 : 복수의 이벤트 적용 불가능
문제점 : 자바스크립트에서 정의한 함수를 활용해서 HTML에 함수를 연결할 경우, 자바스크립트 > 함수명 수정 및 변경!
예시)
1-2. 자바스크립트에서 직접 함수를 연결하는 방법
선택요소 (*이벤트를 주고 싶은 요소).이벤트핸들러 = 함수
예시)
2-1. addEventListener
(복수의 이벤트 적용 가능)
사용방법:
선택요소.addEventListener(이벤트명, 함수);
토글이벤트 사용방법
css에
.convert {
background-color: mint;
color: #fff;
}
js로 돌아와서
<결과>
addeventlistener 이벤트 2-2
html에 이벤트 하나 적용
그리고 자바스크립트에 이렇게 복수의 이벤트 적용하면 둘다 적용됨.
HTML
JS
첫번째 방법
두번째 방법
addEventListener로 글자수세기 버튼 만들기
<결과>
이벤트 핸들러란?
이벤트가 발생하면, 이벤트에 맞는 연결동작이 필요! 이벤트 연결동작을 정의하는 것
이벤트 객체 : 이벤트가 발생하게 되었을 때, 어떤 요소에서 어떤 이벤트가 발생했는지에 대한 정보가 포함된 객체
객체 = 속성(프로퍼티) / 기능(메서드 = 함수)
preventDefault()=> 대표적인 이벤트 객체 내 메서드 : 요소의 기본 속성값을 취소 및 무력화하는 메서드
이벤트 객체 > 프로퍼티
pageX : 현재 문서를 기준으로 이벤트가 발생한 가로위치
pageY : 현재 문서를 기준으로 이벤트가 발생한 세로위치
target : 이벤트 요소.target : 이벤트가 발생한 대상을 반환 / e.target
<결과>
이벤트 버블링: 특정 요소에서 이벤트가 발생했을 때, 그 이벤트가 해당 요소 뿐만 아니라 해당 요소의 부모 요소, 부모요소의 부모요소에도 똑같이 이벤트가 발생한 것으로 봄.
이벤트 캡처링
1) 문서 로딩 이벤트
window.onload = alert("안녕하세요!");
load : 특정 문서의 로딩이 끝났을 떄, 어떠한 결과를 보여주는 이벤트
on 키워드 + 이벤트 : 이벤트 핸들러
2) 마우스 이벤트
마우스가 클릭하거나, hover 그리고 마우스의 포인터가 out되었을 때, 발생하는 이벤트
버튼 클릭하면 배경 초록색으로 바뀌게 해보기
html에 click 버튼을 하나 만들어준다.
js로 와서
해주면 button이라는 것은 문서의 button이다라고 정의해주고, 이렇게 정의된 button을 눌러주면 문서의 몸통(body)의 스타일의 배경이 green컬러로 변경된다.
<결과>
3) 키보드 이벤트
키보드에 어떤 키를 클릭했을 때, 해당 키를 출력할 공간 정의
e.code
e.key
어떤 키를 눌렀는 지 정의가 필요하다.
//키보드 이벤트 > 문서 객체 > body 태그
html을 이렇게 만들어 준다.
js로 와서 result라는 변수를 정의해준다.
body도 정의해준다.
어떤 키값을 눌렀을 때, 컴퓨터가 어떤 키값을 누를 지 예측할 수 없으므로
body.addEventListener("keydown",(e) =>{
result.innerText =
code: ${e.code}, key: ${e.key};
})
첫번째 예시
이렇게 아무 키를 누르면 계속 변환된다.
<결과>
두번째 예시
<결과>
4) 폼 이벤트
