[JavaScript]eventListener, eventHandler
2021. 4. 2. 20:59ㆍJavaScript/Method
<!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>
<div class="color" style="width: 50px; height: 50px; background-color: red;">
<button class="btn">클릭!</button>
</div>
</body>
</html>.color.visible {
background-color: skyblue;
}const color = document.querySelector('.color');
const btn = document.querySelector('.btn');
//먼저 변수를 만들어 HTML내에 있는 요소를 가지고온다
btn.addEventListener("click",function(){
})
//btn에 이벤트를 걸어준다
//어떤 이벤트? --> click 이라는 이벤트
//click을 했을때 무엇을 할거냐 할일 = function
btn.addEventListener("click",function(){
color.classList.toggle('visible');
});
//color의 새로운 'visible'이라는 class를 btn을 클릭하면 추가,제거 를 하려고한다
간단한 예제를 가지고 addEventListener에 대해서 알아보았는데요
click 외에 scroll, mouseover, change, keydown, select, focus 등등 다양하니 한번 찾아보시면 좋을거같아요
사용하는 방법은 여러가지가 있고 응용을 어떻게 하느냐에 따라서 결과물이 천차만별인게 자바스크립트이니
제 예제는 손풀기정도로 봐주시고 더욱 응용해서 멋진 결과물 만드시길 바랍니다~~화이팅!!
'JavaScript > Method' 카테고리의 다른 글
| [Javascript]HTML 요소 불러오기 (0) | 2021.03.30 |
|---|