🎉 이벤트
✔️이벤트: 웹 브라우저나 사용자가 행하는 어떤 동작
문서 영역 안에서 이루어지는 동작만 의미한다
📍 이벤트 핸들러(Event Handler), 이벤트 처리기
: 이벤트와 이벤트 처리 함수를 연결해주는 것
이벤트 이름 앞에 'on'을 붙여서 사용한다!
📍 마우스 이벤트
마우스 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트
<body>
<div id="item">
<img src="images/flower1.jpg" alt="" />
<button class="over" id="open" onclick="alert('눌렀습니다.')">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>민들레</h4>
<p>
어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와
눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고
날아가서 널리 퍼진다.
</p>
<button id="close">상세 설명 닫기</button>
</div>
</div>
</body>
<body>
<div id="item">
<img src="images/flower1.jpg" alt="" />
<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>민들레</h4>
<p>
어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와
눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고
날아가서 널리 퍼진다.
</p>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
</div>
</div>
<script src="./js/event.js"></script>
</body>// event.js 스크립트 파일
function showDetail() { // '상세 설명 보기'를 클릭했을 때 상세 설명을 보여주는 함수
document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시
document.querySelector('#open').style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}
function hideDetail() { // '상세 설명 닫기'를 클릭했을 때 상세 설명을 감추는 함수
document.querySelector('#desc').style.display = "none"; // 상세 설명 부분을 화면에서 감춤
document.querySelector('#open').style.display = "block"; // '상세 설명 보기' 단추를 화면에 표시
}
- 상세 설명 보기 버튼을 누르면
onclick이벤트로 연결된showDetial()함수가 실행되어 사진 아래 상세 설명이 나오게 된다. - 상세 설명 닫기 버튼을 누르면 마찬가지의 방식으로
hideDetail()함수가 실행되어 상세 설명이 닫힌다.
| 속성 | 설명 |
|---|---|
| click | 클릭 했을 때 발생하는 이벤트 |
| dblclick | 두 번 클릭했을 때 발생하는 이벤트 |
| mousedown | 사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트 발생 |
| mousemove | 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생 |
| mouseover | 마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생 |
| mouseout | 마우스 포인터가 요소를 벗어날 때 이벤트 발생 |
| mouseup | 사용자가 누르고 있던 마우스 버튼에서 손을 뗄 때 이벤트 발생 |
📍 키보드 이벤트
키보드에서 특정 키를 조작할 때 발생하는 이벤트
| 속성 | 설명 |
|---|---|
| keypress | 사용자가 키를 눌렀을 때 이벤트 발생 |
| keydown | 사용자가 키를 누르는 동안 이벤트 발생 |
| keyup | 사용자가 키에서 손을 뗄 때 이벤트 발생\ |
📍 문서 로딩 이벤트
웹 브라우저를 창에 보여주는 것과 관련된 이벤트
| 속성 | 설명 |
|---|---|
| abort | 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생 |
| error | 문서가 정확히 로딩되지 않았을 때 이벤트 발생 |
| load | 문서 로딩이 끝나면 이벤트 발생 |
| resize | 문서 화면 크기가 바뀌었을 때 이벤트 발생 |
| scroll | 문서 화면이 스크롤 되었을 때 이벤트 발생 |
| unload | 문서를 벗어날 때 이벤트 발생 |
📍 폼(form) 이벤트
사용자가 자료(정보)를 입력하는 모든 요소
| 속성 | 설명 |
|---|---|
| blur | 폼에 포커스 요소를 잃었을 때 발생 |
| change | 목록이나 체크 상태가 변경되었을 때 발생 <input>, <select>, <textarea> 태그에서 사용 |
| focus | 폼 요소에 포커스가 놓였을 때 이벤트 발생 <label>, <select>, <textarea>, <button> 태그에서 사용 |
| reset | 폼이 다시 시작되었을 때 이벤트 발생 |
| submit | submit 버튼을 눌렀을 때 이벤트 발생 |
📌 문서 객체 모델 (DOM)
Document Object Model
웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법
돔을 사용하지 않으면 상당히 귀찮음!
ex. html 태그를 가리려면 css처리를 해줘야 함
→ 관리가 번거롭고 어렵다.
<body>
<div id="detail">
<h2>상품 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3 style="visibility: hidden">상세 설명</h3>
<p style="visibility: hidden">
2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째
이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어
철처한 관리를 통해 스페셜티 커피를 생산합니다.
</p>
<h3>커피의 풍미</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</body>태그마다 css 스타일을 줘야 하는 번거로움
DOM 사용
웹 문서를 직접 수정하기 보다 자바스크립트를 통해 수정하는 것이 더 편리하다!
✅ document도 수많은 DOM 요소 중 하나!
🌳 DOM 트리
DOM은 나무처럼 생겼다
✔️ DOM 트리는 가지와 노드로 표현
노드 : 웹 문서에 있는 요소나 속성
가지 : 노드와 노드 사이의 연결 관계
✔️ DOM 트리는 웹 문서의 모든 것을 표현
✔️ 태그 - element, 텍스트 - text, 속성 - attribute, 주석 - comment
🖱️ DOM 요소에 접근하기
자바스크립트로 프로그램에 사용할 요소에 접근하는 것
CSS 선택자
id 선택자
➡️ id 값은 한 문서 안에서 유일함 그래서 자주 쓴다
➡️ getElementById()로 DOM 요소에 접근
<body>
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<div id="prod-img">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁">
</div>
<div id="desc">
<h2 class="bright">Information</h2>
<p>2차 세계대전 이후 설립된 <span class="accent">게뎁농장</span>은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 <span class="accent">SCAA 인증</span>을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>
<h2>Flavor Note</h2>
<p class="bright">은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</div>
</body>
- id 값이 'heading'인 요소만 찾아간다!
class 선택자
➡️ getElementByClassName()으로 DOM 요소에 접근
➡️ id와 다르게 웹 문서 안에서 여러 번 사용 가능
➡️ 한 개의 요소만 접근하고 싶다면 배열의 인덱스를 사용
태그 선택자
➡️ 아이디나 선택자가 없는 DOM요소 접근할 때 사용
➡️ getElementByTagName()으로 접근
함수명에 s가 붙는다면 웹 문서 안에서 여러 번 사용 가능
<body>
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<div id="prod-img">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁">
</div>
<div id="desc">
<h2 class="bright">Information</h2>
<p>2차 세계대전 이후 설립된 <span class="accent">게뎁농장</span>은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 <span class="accent">SCAA 인증</span>을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>
<h2>Flavor Note</h2>
<p class="bright">은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</div>
</body>
querySelector(),querySelectorAll()
➡️ id, class, 태그 이름 전부사용 가능
➡️ #id, .class, 기호 없이 태그 이름만 사용
querySelector()로 클래스, 태그 이름 사용할 때는 첫 번째 요소만 접근 가능
✅ 접근하는 DOM요소 개수에만 차이가 있을 뿐 사용 방법은 동일
getElementById()와 querySelector()의 차이
✅ getElementById는 단순히 id 선택자를 사용해서 요소에 접근
✅ querySelector는 id 선택자 뿐만 아니라 둘 이상의 선택자를 사용해서 요소에 접근이 가능하다!
🖱️ 웹 요소의 태그 속성 가져와서 수정하기
: 속성 노드에 접근하면 HTML 요소의 속성 값을 원하는대로 수정할 수 있다
getAttribute()
해당 요소에 지정된 값을 반환
setAttribute()
해당 요소에 속성 값 설정(세팅)
🖱️ DOM에서 이벤트 처리하기
1. HTML 태그 안에서 이벤트 처리기 연결
수정이 필요할 때 HTML 소스를 수정해야 하는 번거로움... 그리고 하나의 요소에 하나의 이벤트 처리기만 사용이 가능하기 때문에 잘 사용하지 않는 방법이다
2. DOM 요소에 이벤트 처리기 연결
이벤트 처리기를 자바스크립트 소스에서 실행
<body>
<div id="container">
<img id="pic" src="images/girl.png" alt="">
</div>
<script src="js/domevent.js"></script>
</body> // 자바스크립트 소스
var pic = document.querySelector('#pic');
function changePic() {
pic.src = "images/boy.png";
}
function originPic() {
pic.src = "images/girl.png";
}➡️ HTML 태그와 뒤섞이지 않고 자바스크립트 소스를 사용한다는 것은 좋지만 이 역시 하나의 요소에 하나의 이벤트 처리만 가능하다!
✔️ addEventListener()
여러 이벤트를 한 번에 처리하기!
➡️ 웹문서 뿐만 아니라 Document객체나 Window객체 어디에서든 사용 가능
var pic = document.querySelector('#pic');
pic.addEventListener('mouseover', changePic, false);
pic.addEventListener('mouseout', originPic, false);
function changePic() {
pic.src = 'images/boy.png';
}
function originPic() {
pic.src = 'images/girl.png';
}
document.addEventListener(
'click',
function () {
alert('안녕하세요!');
},
false,
);✅ pic.addEventListener("이벤트 유형", "함수", 캡쳐여부);
- 이벤트 유형: 처리할 이벤트 유형을 지정! 'on'을 붙이지 않는다
- 함수
- 캡쳐 여부: 기본값 false, 이벤트를 캡쳐링하는지 여부
-이벤트 캡쳐링(true): DOM의 부모 노드에서 자식 노드로 이벤트 전달
-이벤트 버블링(false): DOM의 자식 노드에서 부모 노드로 이벤트 전달
✔️ 웹 요소의 스타일 가져와서 수정
자바스크립트로 특정 웹 요소에 접근하는 방식을 이용해 웹 요소에서 사용한 css 속성에도 접근, 수정이 가능하다!
- 글자 색 바꾸기
<body>
<h1 id="heading">JS와 CSS</h1>
<p id="desc">자바스크립트를 사용해서 웹 문서의 CSS 속성을 제어할 수 있습니다.</p>
</body> 
- 웹 요소를 화면에 표시하기/감추기
<body>
<div id="container">
<p>도형 위로 마우스 포인터를 올려놓으세요.</p>
<div id="rect"></div>
</div>
<script src="js/domcss.js"></script>
</body>
// 자바스크립트 소스
var myRect = document.querySelector("#rect");
myRect.addEventListener("mouseover", function() { // mouseover 이벤트 처리
myRect.style.backgroundColor = "green"; // myRect 요소의 배경색
myRect.style.borderRadius = "50%"; // myRect 요소의 테두리 둥글게 처리
});
myRect.addEventListener("mouseout", function() { // mouseout 이벤트 처리
myRect.style.backgroundColor = ""; // myRect 요소의 배경색 지우기
myRect.style.borderRadius = ""; // myRect 요소의 테두리 둥글게 처리 안 함
});