각 태그에 이벤트를 등록하고 해제해본다.
이벤트 등록 - on( )
이벤트는 on()메소드를 이용해 등록한다.
모든 이벤트는 on을 통해 등록되고 어떤 태그에 어떤 이벤트를 등록할지 적어준다.
btn아이디를 가진 버튼 태그에 click이벤트를 걸어주고
이벤트 내용을 function안에 적어준다.
버튼을 클릭했을 때 일반 이벤트 알림창이 나타난다.
두 번째처럼 단축형태로 이벤트 등록이 가능하다.
on대신 이벤트 형식을 사용하는 방식인데 결국 on메소드를 통해 실행된다.
버튼을 클릭하면 두 알림창 모두 나타난다.
이벤트 다중등록
두 가지 이상의 이벤트를 한번에 걸어주는 것도 가능하다.
div태그에 마우스가 들어오는 mouseenter와
마우스가 나가는 mouseleave이벤트 두개를 걸어주었다.
div태그를 마우스가 들어왔다 나가자 text태그가 두개 생성되었다.
on에 중괄호를 걸어주는 형태로도 여러 이벤트를 걸어줄 수 있다.
인사말의 내용이 들어있는 p태그에 마우스가 들어갔다가 클릭을 하고 나간 것이 콘솔에 출력되었다.
단축형태의 이벤트 등록으로는 하나씩 다 걸어줘야 한다.
이벤트 제거 - off( )
등록된 이벤트 제거를 위해선 off()메소드를 사용해주면 된다.
인자를 아무것도 넣지 않으면 모든 이벤트를 제거하고
mouseenter이벤트만을 제거하고 싶다면 해당 이벤트 이름을 괄호안에 적어준다.
p태그의 모든 이벤트는 제거되고
div태그는 click과 mouseleave만 남았다.
'Front-end > JavaScript' 카테고리의 다른 글
| [자바스크립트] 버블링을 이용해 이벤트 등록하기 (0) | 2022.05.31 |
|---|---|
| [자바스크립트] 이벤트 한번만 실행, 기본 이벤트 해제, one, cancelable, preventDefault (0) | 2022.05.31 |
| [자바스크립트] 이벤트의 흐름, 캡처, 타겟, 버블 단계 알아보기, eventPhase, stopPropagation (0) | 2022.05.29 |
| [자바스크립트] 태그 속성 가져오기, 속성 변경하기, attr, data (0) | 2022.05.28 |
| [자바스크립트] 클래스 추가 제거하기, addClass, removeClass, toggleClass (0) | 2022.05.27 |