JavaScript - Event

💡 Event란?

어떤 행위를 실행하는 것으로 이를 통해 사용자와 웹페이지가 상호 작용할 수 있다.
이벤트 핸들러를 통하여 이벤트가 발생시 원하는 함수에 연결하여 실행 시킬 수 있다.

1. Listen하고 싶은 Event 찾기

• google에 element html element mdn 검색, Web APIs라는 문장이 포함된글 찾기
• element를 console.dir로 출력해서 on 이라고 적혀있는걸 사용하기

2. Click

🚨 !참고

• 특정 이벤트 발생시 함수 실행하기

	title.addEventListener("click",handleTitleClick);

• 함수 실행하기

	handleTitleClick();

3. Mouseenter & Mouseleave

4. resize & copy

🚨 !참고
document에서 body,head,title은 언제든 document.body로 호출 가능하지만 div나 h1 등 은 querySelector나 getElementById를 사용해야 한다.

4. if else 사용하기

5. className 사용하기

🚨 ! 참고
string이 반복되면 상수로 만들어 주는게 좋다.
console에서 오탈자에 대해 친절하게 설명해주기 때문이다.

5. classList 사용하기

6. toggle 사용하기

🚨 ! 참고
5번과 6번은 같은 기능을 수행하고 있는데, toggle을 사용하여 좀 더 스마트한 코드를 만들 수 있다.

👋 마치며

스터디 활동을 위해 기록하고 있습니다.
다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

---

• https://nomadcoders.co/
• https://developer.mozilla.org/ko/docs/Web/Events

---