사용자가 클릭하거나 브라우저 크기가 변경되었을 때 "이벤트가 발생했다"고 말한다. Javascript 이벤트를 다루는 기능을 배워보자.
● click 이벤트가 발생할 때 처리할 함수 등록하기
<body>
<h1>Nice to meet you</h1>
<p class="clas">This is blog</p>
<p class="clas">awesome</p>
<script>
let h1Elements = document.getElementsByTagName('h1')
h1Elements.addEventListener('click', function(){ <------ 이벤트 종류는 click, function()은 익명 함수
alert("Click!!") <-------- 클릭 누르면 알림창 뜨게 만듬
})
</script>
</body>
● resize 이벤트가 발생할 때 처리할 함수 등록하기(브라우저 크기가 변할 때)
<body>
<h1>Nice to meet you</h1>
<p class="clas">This is blog</p>
<p class="clas">awesome</p>
<script>
window.addEventListener('resize', function(){ <----자바스크립트에서 브라우저 객체가 window로 정해져 있다.
alert(window.innerWidth) <------------- 너비가 알림창으로 뜬다
</script>
</body>
실행해보니 브라우저 창을 줄이거나 늘릴 때마다 크기를 알림창으로 알려준다. 재밌다.
'MS AI School' 카테고리의 다른 글
| GitHub 튜토리얼. 깃허브 사용법 (0) | 2022.10.21 |
|---|---|
| Day 7 - JQUERY 사용하기(1) (0) | 2022.10.20 |
| DAY 5 - 자바스크립트 기초(데이터 유형, 함수, HTML에서 작성하기) (0) | 2022.10.13 |
| DAY 4 - CSS 심화 공부(레이아웃, 반응형) (0) | 2022.10.11 |
| DAY 3 - CSS기초 박스모델 공부 (0) | 2022.10.11 |