프론트엔드 개발/Javascript
자바스크립트 - 이벤트 함수, 이벤트 처리기
snowman95
2021. 8. 28. 19:05
728x90
반응형
이벤트 함수
이벤트는 브라우저나 사용자가 행하는 어떤 행동이다.
아래의 이벤트들이 존재한다.
- 마우스 이벤트
종류 설명 click HTML 요소 클릭시 발생 dbclick HTML 요소 더블 클릭시 발생 mousedown HTML 요소 위에서 마우스 버튼 눌렀을 때 mouseup HTML 요소 위에서 마우스 버튼 뗄 때 mousemove HTML 요소 위에서 마우스 버튼 움직였을 때 mouseover HTML 요소 위에 마우스 포인터 올라갈 때 mouseout HTML 요소 위에서 마우스 포인터 벗어날 때 - 키보드 이벤트
종류 설명 keydown 사용자가 키 누르는 동안 발생 keypress 사용자가 키 눌렀을 때 발생 keyup 사용자가 키 뗄 때 발생 - 문서 로딩 이벤트
종류 설명 abort 문서가 완전히 로딩되기 전에 불러오기 멈췄을 때 발생 error 문서가 정확히 로딩되지 않았을 때 발생 load 문서 로딩 끝나면 발생 resize 문서 화면 크기 변경될 때 발생 scroll 문서 화면이 스크롤될 때 발생 unload 문서에서 벗어날 때 발생 - 폼 이벤트
종류 설명 blur 폼 요소에 포커스를 잃었을 때 발생 change 목록/체크 상태가 변경되면 발생
<input>, <select>, <textarea> 태그에서 사용focus 폼 요소에 포커스가 놓였을 때 발생
<label>, <select>, <textarea>, <button> 태그에서 사용reset 폼이 리셋되었을 때 발생 submit submit 버튼 클릭했을 때 발생
이벤트 처리기 (이벤트 헨들러)
이벤트 처리기 또는 이벤트 헨들러는 이벤트가 발생하면 처리하는 함수를 뜻한다.
아래와 같은 형식으로 작성한다.
<태그 on이벤트명 = "이벤트헨들러함수"(예시 1) 클릭하면 알림창 표시
<a href="#" onclick="alert('클릭했을때 알림창 표시')">버튼</a>아래 코드는 HTML이 주인이 되어
마우스 클릭을 했을때 click 이벤트가 호출되고, alert라는 이벤튼 처리 함수를 실행시킨다.
<body>
<a href="#" onclick="alert('버튼을 클릭함')">Hello</a>그러나 DOM을 사용하면 자바스크립트가 주인이 되어 HTML 요소를 가져와서 이벤트 처리기를 연결할 수 있다.
아래는 웹 요소를 여러 방법으로 가져올 수 있는데 그 중 document 객체의 querySelector() 함수로 가져오는 방법이다.
querySelector() 괄호 안에는 클래스 이름, id 이름 또는 다양한 선택자를 넣을 수 있다.
웹요소.onclick = 함수;document.querySelector("#change").onclick = () => {
document.querySelector("p").style.color = "#fff";
};
반응형