event

목차

• 인라인 이벤트
• 프로퍼티 리스너
• addEventListener()
• removeEventListener()
• 이벤트 타입

---

 인라인 이벤트

이벤트를 이벤트 대상의 태그 속성으로 지정

<button type="button" onclick="alert('온클릭');">버튼</button>

---

 

 프로퍼티 리스너

객체의 프로퍼티로 이벤트를 등록하는 방식

// 버튼을 클릭하면 구글로 이동
const BTN1 = document.getElementById( 'btn1' );
BTN1.onclick = function() {
    location.href = "https://google.co.kr";
}

---

 

 addEventListener()

여러개의 이벤트 핸들러를 등록 가능

const btn2 = document.querySelector( "#btn2" );

// 현재 창에서 열기
btn2.addEventListener( "click", () => {
    location.href = "https://www.daum.net"
});

// 화살표 함수는 한줄일경우 중괄호 생략 가능
btn2.addEventListener( "click", () => location.href = "https://www.daum.net" );

btn2.addEventListener( "click", function() {
    location.href = "https://www.daum.net"
});


// 팝업 창 열기
btn2.addEventListener( "click", () => {
    // 주소, name, 열릴 크기
    open( "https://www.daum.net", "", "width = 500px height = 500px" );
});

---

 

 removeEventListener()

removeEventListner( 삭제할 이벤트 타입, 삭제할 이벤트 콜백 함수 );

const btn3 = document.querySelector( "#btn3" );

let newWindow = null;
btn2.addEventListener( "click", () => {
    // newWindow에 열린 창을 담아줌
    newWindow = open( "https://www.daum.net", "", "width = 500px height = 500px" );
});

// 이벤트 삭제
// removeEventListner( eventType, function )
// addEventListener()로 등록된 이벤트의 인수와 같은 인수를 세팅해야 삭제됨

// 익명함수는 인식하지못함
btn3.removeEventListener( "click", () => {
    newWindow.close(); 
});

btn3.addEventListener( "click", () => popUpClose( newWindow ) ); // btn3에 창이 닫히는 event 추가
btn3.removeEventListener( "click", () => popUpClose( newWindow ) ); // btn3에 창이 닫히는 event 를 삭제

function popUpClose( win ) {
    win.close();
}

---

 

 이벤트 타입

마우스 이벤트

// - mousedown - 마우스가 요소안에서 클릭이 눌릴 때
const div1 = document.querySelector('.div1');
div1.addEventListener('mousedown', () => alert('dvi1 클릭'));
// - mouseup - 마우스가 요소안에서 클릭이 해제될 때
// - mouseenter - 마우스 포인터가 요소 안으로 진입 했을 때
div1.addEventListener('mouseenter', () => alert('dvi1 진입'));
// - mouseleave - 마우스 포인터가 요소 바깥으로 나갔을 때
// - mousemove - 마우스 포인터가 요소 안에서 움직일 때
// - event.clientX, event.clientY - 브라우저 화면 기준 X, Y 좌표
// - event.pageX, event.pageY - 전체화면 기준(스크롤 포함) X, Y좌표
// - event.target.getBoundingClientRect() - 요소의 크기와 뷰포트로 부터 상대적인 위치를 반환

 

키보드 이벤트

 

// - keydown : 키가 눌릴 때
// - keypress : 입력 할 수 있는 키가 눌렸을때 ex) 한글, 영어, 방향키, del, ... ( 즉시 text에 반영이 되는 키 )
// - keyup : 누른 키를 뗄 때
// - event.key : 사용자가 누른 키 값을 반환
// - event.keyCode : 사용자가 누른 키 코드(ASCII) 값을 반환

 

포커스 이벤트

 

// - focus : 포커스를 받을 때
// - blur : 포커스가 해지 될 때
// - change : 셀렉트 박스의 값이 변경 될 때

 

폼 이벤트

 

// - submit : 양식(Form)이 제출하기전에 발생, 주로 전송될 값을 유효성 체크할 때 사용

 

진행 이벤트

 

// - load : 객체가 로드 될 때
// - error : 외부 파일 ex) 문서, 이미지, 비디오, ... 로드 중 오류 발생 시

---

 

Github

Link