728x90
반응형
● .addEventListener : 이벤트 발생시키는 명령어
● 화살표 함수
link.addEventListener("click",function(){}); link.addEventListener("click",()=>{});>> 두가지 방법으로 화살표함수를 넣을 수 있다.
a태그가 우선시 되기 때문에 링크를 클릭하셨군요가 안나온다.
● preventDefault: 고유의 명령어를 무시하고 내가 원하는 값을 나오게 해주는 명령어다.
a태그 속성값을 무시하고 원하는 값을 출력하게 하는 명령어
[박스 클릭했을 때 색상 변경하는 방법]
<body>
<div class="box"></div>
<script>
const Box = document.querySelector(".box");
Box.addEventListener("click",function(){
// BOX.addEventListener("click",()=>{});
Box.style.backgroundColor = "aqua";
Box.style.transition = "all 0.5s";
});
</script>
</body>
클릭이벤트
<body>
<div class="box"></div>
<script>
const Box = document.querySelector(".box");
Box.addEventListener("click",function(){
Box.style.backgroundColor = "aqua";
Box.style.transition = "all 0.5s";
Box.style.borderWidth = "5px";
Box.style.borderColor = "red";
Box.style.borderStyle = "solid";
Box.style.transform = "scale(2)";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트 연결하기</title>
<style>
body{
margin: 100px auto;
}
a{
font-size: 100px;
color: #555;
}
</style>
</head>
<body>
<a href="https://guro.himedia.co.kr/">하이미디어 구로캠퍼스</a>
<script>
const link = document.querySelector("a");
link.addEventListener("click",function(e){
e.preventDefault();
console.log("링크를 클릭하셨군요 하하하")
// link.addEventListener("click",()=>{});
});
</script>
</body>
</html><!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>
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.5s;
border-style: solid;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const Box = document.querySelector(".box");
Box.addEventListener("click",function(){
Box.style.backgroundColor = "aqua";
Box.style.transition = "all 0.5s";
Box.style.borderWidth = "5px";
Box.style.borderColor = "red";
Box.style.borderStyle = "solid";
Box.style.transform = "scale(2)";
});
// Box.addEventListener("click",function(){
// BOX.addEventListener("click",()=>{});
// Box.style.backgroundColor = "aqua";
// Box.style.transition = "all 0.5s";
// });
</script>
</body>
</html>728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 46_ flex (0) | 2023.06.23 |
|---|---|
| 비주얼 스튜디오 코드 45_웹표준) 컨텐츠 (0) | 2023.06.23 |
| 비주얼 스튜디오 코드 43_웹 표준) 컨텐츠 (0) | 2023.06.22 |
| 비주얼 스튜디오 코드 42_ 지도 넣기 (0) | 2023.06.22 |
| [JAVASCRIPT]요소 선택하기 (0) | 2023.06.21 |