728x90
반응형
◎ addEventListener 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#title1{
color: blue;
}
</style>
</head>
<body>
<div id="detail">
<h2 id="title1">상품 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3 id= "title2">상세 설명</h3>
<p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피
품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
<h3 id= "title3">커피의 풍미</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
<script>
var color1 = "";
color1 = document.querySelector("#title1");
color1.addEventListener("mouseover", function(){
color1.style.color = "red";
color1.style.fontSize = "2.0em";
color1.style.backgroundColor = "blue";
});
color1.addEventListener("mouseout", function(){
color1.style.color = "blue";
color1.style.fontSize = "1.5em";
});
var color2 = document.querySelector("#title2");
color2.addEventListener("click", function(){
color2.style.color = "blue";
});
var color3 = document.querySelector("#title3");
color3.addEventListener("mouseover", function(){
color3.style.color = "green";
});
color3.addEventListener("click", function(){
color3.innerHTML = "<span style='color : yellow'>커피의 풍미</span>";
});
</script>
</body>
</html>1. '상품 정보'에 마우스를 올리면 글자색(red), 글자사이즈(2.0em), 배경색(blue)을 변경하고
마우스를 내리면 글자색(blue), 글자사이즈(1.5em)를 원상복귀하라는 의미입니다.
2. '상세 설명'을 click하면 글자색(blue)을 변경하라는 의미입니다.
3. '커피의 풍미'에 마우스를 올리면 글자색(green)을 변경하라는 의미입니다.
만약 click하면 글자색(yellow)을 변경합니다.
여기서 addEventListener("event", function) 의 값을 넣어주어야합니다.
function을 별도로 만들어 주거나, 내부에서 바로 function을 지정하면 됩니다.
아래와 같이 색을 지정해도 됩니다.
color3.innerHTML = "<span style='color : yellow'>커피의 풍미</span>";
◎ 위의 코드를 이용해 배열을 지정하는 방법입니다.
<script>
var det = document.getElementById("detail").childNodes;
document.write(det[1].firstChild.nodeValue);
document.write(det.length + "<br>");
var det2 = document.getElementById("title1").childNodes;
document.write(det2.length);
document.write(det[1].firstChild.nodeValue);
</script>id를 불러와 childNodes 코드를 이용해 배열을 만들어 det라는 변수에 저장합니다.
childNodes는 불러온 id의 자식요소들만 배열로 지정합니다.
det[1].firstChild.nodeValue 는 '상품정보' 가 출력됩니다.
childNodes는 노드를 좀 더 공부하면서 자세하게 다뤄보도록 하겠습니다!
◎ 아래는 빈 정사각형 도형을 한 번 클릭시 녹색+원형, 또 한 번 클릭시 원상태로 복귀, 다시 한 번 클릭시 빨간+원형으로 출력되도록 하시오.
출력예시)
1. 무색 + 정사각형
2. 녹색 + 원형
3. 무색 + 정사각형
4. 빨간색 + 원형
5. 무색 + 정사각형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM CSS</title>
<style>
#container {
width:400px;
margin:50px auto;
text-align: center;
}
#rect {
width:100px;
height:100px;
border:1px solid #222;
margin:30px auto;
transition: 1s;
}
</style>
</head>
<body>
<div id="container">
<p>도형 위로 마우스 포인터를 올려놓으세요.</p>
<div id="rect"></div>
</div>
<script>
var n = 0;
var myRect = document.querySelector("#rect");
myRect.addEventListener("click", a);
function a() {
if(n%2 === 0){
if(n%4 === 2){
// myRect 요소의 배경색
// myRect 요소의 테두리 둥글게 처리
myRect.style.backgroundColor = "red";
myRect.style.borderRadius = "50%";
} else{
// myRect 요소의 배경색
// myRect 요소의 테두리 둥글게 처리
myRect.style.backgroundColor = "green";
myRect.style.borderRadius = "50%";
}
} else{
// myRect 요소의 배경색 지우기
// myRect 요소의 테두리 둥글게 처리 안 함
myRect.style.backgroundColor = "";
myRect.style.borderRadius = "";
}
n++;
}
</script>
</body>
</html>
addEventListener의 응용 예시입니다. 도저히 생각나지 않아서 주변의 도움을 받고 겨우 문제를 해결할 수 있었습니다.
많은 예제를 풀면서 생각하는 힘을 길러야겠어요!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] DOM에서 노드 추가, 삭제하기 (0) | 2022.12.20 |
|---|---|
| [java script] 구구단 출력하기 예시 (0) | 2022.12.19 |
| [java script] addEventListener의 이벤트 종류 (0) | 2022.12.19 |
| [java script] 문서 객체 모델(DOM) (0) | 2022.12.19 |
| [java script] 브라우저 관련 객체(window, navigator, location) (0) | 2022.12.17 |
