티스토리 뷰

웹개발(프론트)

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
    «   2024/05   »
    일 월 화 수 목 금 토
    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
    글 보관함