요 방식으로 해도 되고, 아니면
지금은 함수를 연결해서 만들어줄거임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이벤트 여러개 연결하기</title>
</head>
<body>
<img src="./img/one.jpg" alt="one" id="cover" width="200" />
<script>
// 이미지태그 cover 변수에 할당하기
const cover = document.querySelector("#cover");
// 이미지 위에 마우스가 올라가면 changePic 이벤트 핸들러 실행
cover.addEventListener("mouseover", changePic);
// 이미지 밖으로 마우스가 떠나면 originPic 이벤트 핸들러 실행
cover.addEventListener("mouseout", originPic);
function changePic() {
cover.src = "./img/one.jpg";
}
function originPic() {
cover.style.width = "200px";
cover.src = "./img/two.jpg";
}
</script>
</body>
</html>
이건 하나의 태그에 두개의 이벤트를 넣어준거임.
addEventListener를 넣어준거임 이건 무조건 !!!
이벤트명을 ''문자열이어야함 무조건 (없어지면 변수 취급을 당한다.
그래서 오류가 남)
반드시 문자열로 넣기 !!!!!!
마우스 오버가 되면 changePic을 실행하고 changePic은
function changePic() {
cover.src = "./img/one.jpg";
}
로 되어있기 때문에 이걸 실행하게 되어있음
get엘레멘트는 src가 뜨지않는다.(태그의 형태만 저장되기 때문이다.) 속성노드에 접근하려면 querySelector 로 접근해야한다.
cover은 img태그임.
안녕하세요 ! 발전을 위해 매일 도전하는 퍼블리셔 류영경입니다.