1️⃣ 이벤트
(1) 요소.addEventListener("이벤트 이름", 콜백함수)
- 선택 요소에 지정한 이벤트가 발생하면, 약속된 명령어를 실행시키는 메소드이다.
(2) addEventListener 이벤트의 종류
-
click: 클릭 -> 이게 거의 95% 사용된다.! -
Mouse 계열
•Mouseover: 요소에 커서를 올렸을 때
•Mouseout: 마우스가 요소를 벗어날 때
•Mousedown: 마우스 버튼을 누르고 있는 상태 • Mouseup : 마우스 버튼을 떼는 순간
•Focus: 포커스가 갔을 때 ,<input>에다가 쓰는 것이 적당
•Blur: 포커스가 벗어나는 순간 -
Key 계열
•Keypress: 키를 누르는 순간 + 누르고 있는 동안 계속 발생
•Keydown: 키를 누르는 순간에만 발생
•Keyup: 키를 눌렀다가 떼는 순간 발생
•Load: 웹페이지에 필요한 모든 파일(html, css, js 등)의 다운로드가 완료 되었을 때
•Resize: 브라우저 창의 크기가 변경 될 때
•Scroll: 스크롤이 발생할 때
•Unload: 링크를 타고 이동하거나, 브라우저를 닫을 때
•Change: 폼 필드의 상태가 변경 되었을 때
this: js에서자기 자신을 의미함. 해당 함수가 속해있던 객체의 참조이며, 무언가를 클릭할 때 불러오는 함수(콜백함수)에서 this는 그 무언가를 의미함. (실습코드는 3번 밑에 있음)
(3) preventDefault()
- 이벤트를 실행했을 때 해당 기능을 막는 event
➡️ 맨 마지막 클릭 버튼을 누르면 클릭함이라고 변경된다. this 떄문에 나 자신이 변경되는 것이다.
<details>: 화살표 누르면 숨겨진 내용이 보이게 하는 방법
2️⃣ jQuery 세팅
- 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다.
우선, 사용하기 위해서는 1. 파일 다운로드 or 2. CDN사용 중에 고르면 된다.
CDN이 좀 더 편해서 이것으로 진행하겠다.
https://releases.jquery.com/
-> 접속해서 jQuery 3.x 에서 minified를 선택하고 src="https://code.jquery.com/jquery-3.7.1.min.js"만 복사해서 html의 <head>에 붙여넣기만 하면 완료이다!
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>- 기본 형태 :
$(선택자).동작함수()
<div id="hello">hello</div>//jquery
//$("선택자").동작함수("");
//text
//console.log($('#hello').text());
$('#hello').text('bye');
$('#hello').css('font-size', '60px'); //원래 hello라고 되어있는 글이 bye로 변하고 폰트크기도 변함
