JavaScript (EventListener)
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p id="title">Alert 박스</p>
<button id="close"> X </button>
</div>
<button onclick="alertOpen('아이디를 입력해라')">버튼1</button>
<button onclick="alertOpen('비밀번호를 입력해라')">버튼2</button>
<script>
function alertOpen(구멍){
document.getElementById('title').innerHTML=구멍;
document.getElementById('alert').style.display='block';
}
</script>
</body>
</html>Parameter 포스팅에서 작성했던 코드입니다.
코드를 보시면 JavaScript 코드가 HTML에도 있어서 정리가 필요해 보여요.
onclick과 같은 기능을 가지고 있으면서 HTML을 깔끔하게 정리해줄 수 있는 문법이 있어요.
EventListener 문법이 우리의 HTML을 정리해줄 수 있는 문법이예요.
EventListener : 이벤트를 듣는 자
어떠한 이벤트가 발생 했는지 확인을 하여 원하는 기능을 호출하는 것 입니다.
Event, 이벤트 : 특정 행동 / 우리가 웹페이지에서 행하는 행동
click(클릭), mouseover(마우스오버), scroll(스크롤) 등과 같이 웹 페이지에서 이루어지는 행동을 이벤트라고 하며 어떠한 행동이 행해졌는지 확인해주는 기능이 EventListener 입니다.
이벤트에는 매우 다양한 이벤트가 있기 때문에 원하는 혹은 필요한 이벤트가 있을 경우 Google에게 물어보셔서 사용하시면 됩니다.
EventListener를 어떻게 사용하는가?
document.getElementById('close').addEventListener('click', function(){
// 이벤트 리스너 문법
// 왼쪽에 있는 요소가 click이 되면 function함수를 실행해달라는 명령
document.getElementById('alert').style.display = 'none';
// Alert를 닫아주는 명령
});
이벤트 리스터 사용 : addEventListener('이벤트', 이벤트시 호출할 function(){});
1. EventListener를 추가하고 싶은 태그의 Id 혹은 Class명을 getElementById('아이디명') 혹은 getElementByClass('클래스명')로 불러와주세요.
2. addEventListener('이벤트', 이벤트시 호출할 function(){}); 을 get기능 뒤에 추가해주세요.
3. ('이벤트', 이벤트시 호출할 function(){}); 이 부분을 채워주시면 됩니다.
- '이벤트' : 원하시는 특정 행동 (click, mouseover등과 같은 행동)을 작성해주세요.
- function(){} : 이벤트가 발생했을 때 실행되는 기능을 {}안에 기록해주시면 됩니다.
예) document.getElementById('alert').style.display = 'none'; : 아이디가 alert인 태그의 display를 none으로 바꿔주세요~
※ 위의 예제 코드의 명령을 이야기하면
현재 있는 html 파일(document)에서 아이디가 close인 태그가 클릭이 됬을 때
현재 있는 html 파일(document)에서 아이디가 alert인 태그의 display를 none으로 바꿔주세요~
(alert상자를 닫아주세요~) 라는 명령이 되요.
※ 주의할 점! 중괄호{ }가 소괄호( )안에서 닫히기 때문에 Javascript를 작성할 때 괄호가 제대로 닫혔는지,
그리고 괄호가 많기 때문에 괄호의 짝이 맞는지 확인해주시면 좋아요.
EventListener를 사용해서 Alert 박스의 X를 눌렀을 때 alert 창이 닫히도록 하는 기능을 구현해보세요.
<div class="alert-box" id="alert">
<p id="title">Alert 박스</p>
<button id="close"> X </button>
</div>
<button onclick="alertOpen('아이디를 입력해라')">버튼1</button>
<button onclick="alertOpen('비밀번호를 입력해라')">버튼2</button>
<script>
function alertOpen(구멍){
document.getElementById('title').innerHTML=구멍;
document.getElementById('alert').style.display='block';
}
</script>alert 창 닫는 코드예요.
1. alert 창 닫기 버튼의 id 혹은 class를 불러온 뒤
2. EventListener로 클릭을 했을 때 alert 창이 닫히는 명령(메소드)을 작성해주면 되요.
/** 경고창 닫는 명령 **/
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').sytle.display='none';
});
JavaScript 코드 보는 Tip!
코드는 위에서 아래로, 왼쪽에서 오른쪽 순서로 실행이 되요.
그렇기 때문에 아무리 긴 코드라도 왼쪽에서부터 하나씩 뜯어 보시면 코드를 보실 때 조금 더 도움이 되실 거예요.
긴 코드에 '.'가 있는 경우 '.'을 기준으로 뜯어 보시면 됩니다. '.'으로 명령을 하나의 메소드로 묶었다고 생각하시면 됩니다. 짧은 명령들을 '.'을 이용해서 하나의 명령으로 만들었다고 생각하시면 이해하기 쉬울거예요.
예) document.getElementById('close').addEventListener('click', function(){});
해당 문서에서~.아이디가 'close'인 것을 찾아줘.그 아이디에 'click'이벤트가 발생하면 ~을 실행해줘
Next > JavaScript(document&DOM)
'Programing > JavaScript' 카테고리의 다른 글
| JavaScript(jQuery 1) (0) | 2021.09.09 |
|---|---|
| JavaScript(document&DOM) (0) | 2021.09.09 |
| JavaScript (Parameter) (0) | 2021.08.05 |
| JavaScript (Function) (0) | 2021.08.04 |
| JavaScript (Alert) (0) | 2021.08.02 |
