1. addEventListener() 메서드
- addEventListener()메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 사용 가능
- addEventListener(이벤트, 함수, 캡처 여부);
1) 이벤트
- 이벤트의 유형을 지정
- 단, click과 keypress처럼 on을 붙이지 않고 씀
2) 함수
- 이벤트가 발생하면 실행할 명령이나 함수 지정
- 여기에서 함수를 정의할 때는 event 객체를 인수로 받음
3) 캡처 여부
- 기본값 false true와 false 중에서 선택가능
- true= 캡처링 = 부모 노드에서 자식 노드로 전달되는 것
- false=버블링= 자식 노드에서 부모 노드로 전달되는 것
- 마우스 포인터를 올리면 이미지 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마우스 포인터를 올리면 이미지 바꾸기</title>
<style>
#container {
width:300px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images\easys-1.jpg" id="cover">
</div>
<script>
var cover = document.getElementById("cover");
cover.addEventListener("mouseover", changePic); //포인터를 올리면 changePic()
cover.addEventListener("mouseout", originPic); //포인터를 내리면 originPic()
function changePic(){
cover.src = "images/easys-2.jpg";
}
function originPic(){
cover.src = "images/easys-1.jpg";
}
</script>
</body>
</html>
- 메서드 안에서 함수 선언하기
var cover = document.getElementById("cover");
cover.addEventListener("mouseover",function()
{
cover.src="images/easys-2.png";
});
cover.addEventListener("mouseout", function()
{
cover.src ="images/easys-1.png";
});
2. CSS 속성에 접근하기
-자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있음
-document.요소명.style.속성명
- id가 desc인 요소의 글자색 바꾸기
document.getElementById("desc").style.color="blue";
- 도형의 테두리와 배경색 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>도형의 테두리와 배경색 바꾸기 </title>
<style>
h2 {
text-align:center;
}
#rect {
border:1px solid black;
border-radius:0%;
background-color:white;
width:100px;
margin:20px auto; /*위아래 마진은 20px씩 , 좌우 마진은 자동계산 / 가운데 정렬*/
height:100px;
}
</style>
</head>
<body>
<h2>도형 위로 마우스 포인터를 올려놓으세요</h2>
<div id="rect"></div>
<script>
var rect = document.getElementById("rect");
rect.addEventListener("mouseover", function(){
rect.style.backgroundColor="green"; //초록색으로 지정
rect.style.borderRadius="50%"; //테두리 둥글기를 50%로 지정
});
rect.addEventListener("mouseout", function(){
rect.style.backgroundColor="";
rect.style.borderRadius="";
})
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 17장 예제 -DOM에서 노드 추가하기 (0) | 2023.04.14 |
|---|---|
| 17장 실습 (2) | 2023.04.14 |
| 17장 예제 - DOM에서 이벤트 처리하기 (1) (0) | 2023.04.14 |
| 17장 예제 - DOM 요소에 접근하고 속성 가져오기 (3) (0) | 2023.04.13 |
| 17장 예제 - DOM 요소에 접근하고 속성 가져오기 (2) (2) | 2023.04.13 |
