addEventListener 메서드 사용하기
//html
<div class="alert-box" id="alert">Alert Box
<button id='close'>close!</button>
</div>
//script
<script>
document.getElementById('close').addEventListener('click', function(){
//click시 코드 실행
document.getElementById('alert').style.display = 'none';
});
</script>id가 close인 요소를 클릭했을 때, 다음 함수가 실행된다는 의미이다.
onclick을 직접 사용하는 대신 이렇게 이벤트 리스너를 사용할 수도 있다.
이렇게 onclick이나 addEventListener를 사용하여 이벤트를 실행시키는 메서드가 이벤트 핸들러이다.
이벤트 핸들러를 등록하는 방식에는 세가지가 있다.
1. 어트리뷰트 방식
<button onclick="sayHi();">Click Me!</button>
<script>
function sayHi(){
alert("안녕하세요! 환영합니다!");
}
</script>2. 이벤트 핸들러 프로퍼티 방식
<body>
<button>Click Me!</button>
<script>
document.querySelector('button').onclick= function(){
alert("안녕하세요! 환영합니다!");
}
</script>
</body>주의) eventlistener에 함수를 대입할 때
$button.onclick = clickEvent ; (o)
$button.onclicke=clickEvent(); (x)
3. addEventListener 방식
<body>
<button>Click Me!</button>
<script>
document.querySelector('button').addEventListener('click', function(){
alert("안녕하세요! 환영합니다!");
});
</script>
</body>결과
세 코드 모두 같은 결과가 도출된다.
'Javascript' 카테고리의 다른 글
| function 2. 함수정의 방식(화살표 함수) (0) | 2023.02.02 |
|---|---|
| function 1. 함수정의 방식(함수 선언문, 함수 표현식, 호이스팅) (0) | 2023.02.02 |
| Javascript로 HTML 조작하기: 열고 닫는 버튼 만들기 (0) | 2023.02.02 |
| Javascript로 HTML 조작하기: onclick, function (0) | 2023.02.02 |
| Javascript로 HTML 조작하기: selector(id, class, tag...) (2) | 2023.02.01 |