고정 헤더 영역
상세 컨텐츠
본문
메인 Javascirpt의 이벤트란 ?
DOM에서 특정 이벤트가 발생되면 우리는 JavaScript 이벤트 객체에서 이를 확인할 수 있다.
DOM 구조에서 이벤트는 매우 다양하지만, 자주 쓰는 이벤트는 아래와 같다.
- 포커스 이벤트(focus, blur)
- 폼 이벤트(reset, submit)
- 뷰 이벤트(scroll, resize)
- 키보드 이벤트(keydown, keyup)
- 마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave)
- 드래그 앤 드롭 이벤트 (dragstart, drag, dragleave, drop)
addEventLister 란 ?
이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.
이벤트리스너를 이용하면 특정 DOM 위에 말한 Javasript 이벤트가 발생할 때 특정 함수를 호출한다.
추가적으로 더 말하자면
onclick, onkeudown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 현대적인 방법으로 , addEventLister 를 활용하는 것이다
이벤트 리스너 등록하기
DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)각 매개변수를 살펴보면
이벤트명 : Javascript에서 발생할 수 있는 이벤트 명을 입력한다.
함수명 : 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수 명을 입력한다.
옵션: 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.
클릭 이벤트 핸들러를 등록하는 경우 ( 예 )
// 예전 버전
target.onclick = function () {}
//addEventLister 방식
targetr.addEventLister('click', function(){})addEventLister 핸들러의 장점으로는 ?
1.이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다
2.같은 리스넛(타겟)에 대해 다수의 핸들러를 등록할 수 있다
3.추가적은 옵션 사항들이 제공된다.
샘플 코드
<html>
<a>클릭</a>
</html>
<script>
const a = document.querySelector('a');
a.addEventListener('click', showConsole);
function showConsole() {
console.log("콘솔로그 실행");
}
</script>위의 방식으로 이벤트 리스너를 등록하면,
사용자 이벤트마다 특정 코드를 실행하는 것이 가능하다.
이벤트 리스너를 이용할 경우 특정 스크롤 이벤트 발생 시 이벤트를 실행
혹은 input 태그에 글자 수를 확인하는 등의 코드로 활용이 가능하다.
만약 특정 function을 호출하는 경우가 아니라 해당 이벤트 리스너에
공통의 function이 아니라고 하면 화살표 함수로 작성해줘도 코드는 작성한다.
<html>
<a>클릭</a>
</html>
<script>
const a = document.querySelector('a');
a.addEventListener('click', ()=> {
console.log("콘솔로그 실행");
});
</script>출처 : [김평범's OrdinaryCode:티스토리]
이벤트 리스너 삭제하기
이벤트 리스너의 경우 웹 애플리케이션 메모리 누수의 원인이 될 수 있다.
더 이상 해당 이벤트 리스너가 필요 없다고 하면 반드시 추가된 이벤트 리스너는 반드시 삭제해주어야 한다.
특정 페이지에서만 사용하는 이벤트 리스너라면 해당 페이지를 떠날 때 이벤트 리스너를 삭제해준다.
이벤트 리스너를 삭제할 땐 removeEventListener을 이용한다.
DOM객체. removeEventListener(이벤트명, 실행했던 함수명);나의 경우 Vue 코드에서 eventListener를 이용했다.
특정 vue페이지에서 addEventListener를 추가했다면 해당 페이지를 떠날 때
반드시 beforeDestroy() 메서드에서 추가한 이벤트 리스너를 removeEventListener로 삭제했다.
Vue의 mounted는 해당 페이지가 렌더링 되었을 때 실행되고,
beforeDestroy는 페이지가 떠나기 전 해당 코드가 실행된다.
즉, 더 이상 이벤트 리스너가 필요 없다면 꼭 제거해주어야 한다.
이벤트 객체 모음
- click - 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다 .
- mousever - 마우스를 HTML 요소 위에 올리면 발생한다
- mouseout - 마우스가 HTML 요소 밖으로 벗어날 때 발생한다
- mousedown - 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML 요소를 드레그 할 때 사용할 수 있다 .
- mouseup - 마우스 버튼을 떼는 그 순간 , 드래그한 HTML 요소를 어딘가에 놓을 때 사용할 수 있다.
- mousemove - 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
- focus - HTML요소에 포커스가 갔을때 발생한다.
- blur - HTML요소가 포커스에서 벗어났을때 발생한
- ---------키 보 드
- keypress - 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
- keydown - 키를 누를 때 발생하낟 .
- keyup - 키를 눌렀다가 떼는 순간에 발생한다
- load - 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
- resize - 브라우저 창의 크기를 조절할때 발생한다
- scroll - 스크롤바를 드래그하거나 키보드 (up.down) 를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤 할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않는다.
- unload - 링크를 크릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 챙을 닫을 때 이벤트가 발생한다
- change - 폼 필드의 상태가 변경되었을 때 발생한다 .라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들 수 있다.
'프론트 엔드 연관 > JAVAScript 연관' 카테고리의 다른 글
| 콜백 함수 (callback) 의미는 ? (0) | 2022.10.08 |
|---|---|
| (중요/내용추가됨)Function:함수? (1) | 2022.09.26 |
| 전역변수 와 지역변수 (0) | 2022.09.22 |
| 불리언(boolean) 뜻 과 이해 (0) | 2022.09.21 |
| undefined와 null의 차이점이란 ? (0) | 2022.09.19 |
