SMALL
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<button id="btn1">클릭1</button>
<button id="btn2">클릭2</button>
<button id="btn3">클릭3</button>
<div id="box"></div>
<div id="box1"></div>
<style>
#box {
width: 80%;
height: 100px;
border: 1px solid #000;
}
#box1 {
width: 300px;
height: 100px;
background-color: #fc0;
display: none;
}
</style>
<script>
//btn1 가져오기
const btn1 = document.getElementById('btn1');
//btn1에 클릭이벤트 생성
btn1.onclick = function() {
alert('이벤트 테스트중입니다');
}
//btn2 가져오기
const btn2 = document.getElementById('btn2');
// btn2에 이벤트리스너 적용하기
btn2.addEventListener('click', function(){
document.getElementById('box').style.backgroundColor = '#ff0000';
});
//btn3 가져오기
const btn3 = document.getElementById('btn3');
//btn3에 이벤트리스너 적용
btn3.addEventListener('mouseover',function(){
document.getElementById('box1').style.display = 'block';
});
btn3.addEventListener('mouseout',function(){
document.getElementById('box1').style.display = 'none';
});
</script>
</body>
</html>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 4. forEach (0) | 2023.03.31 |
|---|---|
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(3) 이벤트사용하기 (0) | 2023.03.31 |
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(1) (0) | 2023.03.31 |
| 자바스크립트 javascript 2. 변수,배열오브젝트,연산자,if 조건문,for 반복문DOM(2) 반복문 , list요소 가져오기 (0) | 2023.03.31 |
| 자바스크립트 javascript 2. 변수,배열오브젝트,연산자,if 조건문,for 반복문DOM(1) (0) | 2023.03.31 |
댓글