그냥하자 시리즈는 완전 입문 단계인 나에게 말그대로 그냥할 뿐이다. 익숙해져야 한다. 그리고 하고싶게 만들고 이 트리거가 결국 할수 있게 만들 것이다.
그래서 그냥하자 시리즈는 basic of basic 수준,,, 하지만 이것도 때로는 어렵게 늦겨질 때도 있지만 적응하고 그냥합세,,,기본 심화과정은 반복하면서 진행할 예정!
이벤트(event)
이벤트는 이벤트를 발생하는 실마리로서 이벤트 트리거와 이벤트 내용인 이벤트 핸들러로 구성된다.
trigger는 사용자의 행동이나 특정 상황의 발생을 의미
| 이벤트 속성 | 설명 |
|---|---|
| oneclick | HTML 요소를 클릭할 때 발생 |
| onechange | HTML 요소를 변경할 때 발생 |
| onemouseover | HTML 요소 외부로부터 요소 위로 마우스를 이동할 때 발생 |
| onemousedown | HTML 요소 위에서 마우스 왼쪽 버튼을 누르는 동안 발생 |
| onekeydown | 키보드를 누를 때 발생 |
| onload | 웹페이지의 로딩이 완료될 때 발생 |
const myButton = document.querySelector('#myButton');
// 마우스 클릭 이벤트
myButton.addEventListener('click', function () {
console.log('클릭');
});
> 버튼을 누르면 '클릭' 노출
첫 번째 인자로 주어진 이벤트에, 두 번째 인자로 주어진 함수의 동작을 부여 콜백함수라고 부름
const logMouseEnter = () => { console.log('진입'); };
const logMouseLeave = () => { console.log('이탈'); };
// 마우스 진입/이탈 이벤트
myButton.addEventListener('mouseenter', logMouseEnter);
myButton.addEventListener('mouseleave', logMouseLeave);
마우스 커서를 움직였을 때 진입/이탈 노출이벤트 객체
화면같은 요소들을 상수같은 것으로 지정할 때는 $표시 권장
addEventListener 의 콜백함수의 인자에 함수로 포함
const $clickPosition = document.querySelector('#clickPosition')
// 하나의 이벤트에 여러 콜백함수 등록 가능
clickPosition.addEventListener('click', function (e) {
let text = 'x: ';
text += e.clientX;
text += ', y: ';
text += e.clientY;
clickPosition.textContent = text;
});
// 인풋 요소의 값이 바뀔 때
myInput.addEventListener('change', (e) => {
console.log(e.target.value)
});
// 키 입력
myInput.addEventListener('keyup', (e) => {
console.log(e.key);
});addEventListener - EventTarget의 기능
첫 번째 인자로 주어진 이름의 이벤트 발생시 두 번째 인자로 주어진 콜백함수 실행
click 이벤트
요소가 클릭되었을 때 alert- 주어진 메시지로 알림 팝업 띄움
이벤트
mouseenter, mouseleave 이벤트
마우스 커서가 들어올/나갈 때
setTimeout - 타임아웃 설정, clearTimeout에 사용될 식별자 반환
clearTimeout - 인자로 주어진 식별자의 타임아웃 해제
같은 이벤트에 대해 여러 핸들러 등록 가능
setInterval - 첫 번째 인자로 받은 콜백함수를 두 번째 인자의 밀리초마다 실행
clearInterval - 인자로 주어진 식별자의 인터벌 해제
focus, blur 이벤트
요소가 포커스(입력을 위해 선택)되었을 때 / 해제되었을 때
keyup 이벤트
키보드 키가 눌린 후 올라올 때
keydown, keypress와 비교
change 이벤트
인풋 요소의 값이 바뀔 때
+++ 08.11
출처 : 코딩 자율학습 도서
이벤트 등록하기
- 인라인 방식으로 이벤트 등록하기
- 프로퍼티 리스너 방식으로 이벤트 등록하기
요소 노드에 직접 속성으로 이벤트를 등록하는 방법
- 이벤트 등록 메서드로 이벤트 등록하기
DOM에서 addEventListener()메서드를 사용해 이벤트를 등록하며 3가지 방법 중 가장 권장하는 방식.
<노드>.addEventListener("<이벤트 타입>", <이벤트 함수>);
이벤트 타입은 on만 빼면 된다
