티스토리 뷰

웹개발(프론트)

eventlistener

수달찌 2021. 3. 20. 20:56

목차

 

EventListener

사용자가 어떤 행동(event)을 했을 때,

반응하여(listener) 지정된 행동을 하는 것을

eventlistener라 한다.

 

Event 종류

종류는.. 그냥 모든 것이라 할 수 있다.

대충 말하는 게 아니라 진짜 모든 것이다.

마우스 클릭부터, 마우스를 움직였을 때, 스크롤했을 때, 심지어 브라우저의 크기를 변경했을 때까지 있다.

 

이벤트 참조 | MDN

이벤트 참조 DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데

developer.mozilla.org

처음에는 너무 높은 자유도에, 더불어

활용을 떠올리기 쉽지 않다.

그러니 자주 쓰이는 listener 를 먼저 알아보자.

 

이벤트명 발생시점
click 대상 클릭시 발생
mouseenter(mouseover) 마우스가 대상 위로 올려질 시 발생
mouseleave(mouseout) 마우스가 대상 밖으로 나갈 시 발생
keyup 키보드 키를 눌렀다가 땔 시 발생
mousemove 마우스를 움직일시 발생

 

사용법

<body>
  <div id="listener">
    listener
  </div>
  <script src="main.js"></script>
</body>
const listener = document.getElementById("listener");

function handleClick(){
  alert("Did u Click?!");
}

listener.addEventListener('click',handleClick);

후.. 영상 추가는 처음인데 버그가 살짝 있다..

 

어쨌든 ID로 요소를 선택 한 뒤(getElementById) 변수에 정의한다.

다음 해당 변수에 eventlistener를 추가 하면 된다.(addEventListener)

첫 번째 인자는 event종류,

두 번째 인자는 해당 이벤트 발생 시 실행되는 함수이다.

팁

콘텐츠 위로 마우스가 올려질때 mouseover

컨텐츠 밖으로 마우스가 나갈 때 mouseout

를 쓰라고 봤을 텐데,

두 가지 event는 단점이 listener가 계~속 발생 한다.

즉, 마우스를 올려놨을 때, 계속 해당 함수가 실행된다는 것,

 

이를 방지하기 위해 mouseover 대신 mouseenter,

mouseout 대신 mouseleave 를 쓰면

마우스가, 콘텐츠 내외로 드나드는 순간 한 번만 발생 하게 할 수 있다.

 

물론 mouseover, mouseout를 써서도 removelistener를 쓰면 한번만 뜨겠지만,

개인적으로 깔끔한 이 listener를 더 좋아한다

끝

동영상은 대표이미지가 안되는구나...

그런데 왜 대표 버튼을 추가해놨을까..ㅜ

저작자표시 (새창열림)

'웹개발(프론트)' 카테고리의 다른 글

가상셀렉터  (0) 2021.03.26
타이머기능  (0) 2021.03.23
line-height  (0) 2021.03.18
햄버거 메뉴에 대한 이슈  (0) 2021.03.17
JS로 태그 추가하기  (0) 2021.03.16
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함