[ JavaScript ] 마우스 이벤트, 키보드 이벤트, 폼 이벤트

하루입니다.

 

 

---

 

마우스 이벤트

• onmousenter : 엘리먼트 위로 마우스가 움직일 때
• onmouseleave : 엘리먼트 밖으로 마우스가 움직일 때
• onmouseover : 엘리먼트 위로 마우스가 움직일 때
• onmouseout : 엘리먼트 밖으로 마우스가 움직일 때
• onclick : 엘리먼트를 클릭했을 때
• onmousemove :엘리먼트 위에서 마우스가 움직일 때

 

박스1을 들어가고, 박스2를 들어가고, 박스2를 나가고, 박스1을 나갔다.

 

 

 

 

박스 1을 들어가고, 박스 4에 들어감과 동시에 박스3에서는 나가고, 박스 4에서 나감과 동시에 박스 3으로 들어가고, 박스 3을 나간다.

 

 

 

 

 

 

 

 

 

 

키보드 이벤트

KeyboardEvent객체의 주요 API

프로퍼티 

key 

• 지금 입력한 문자를 제공한다.
• 문자키 : A single character (like "a", "W", "4", "+" or "$")
• 특수키 : A multicharacter (like "F1", "Enter", "ALT", "CTRL", "META", "SHIFT", "HOME" or "CAPS LOCK")
• 입력필드에서 Enter키를 입력했을 때 동작을 제어할 수 있다.
• 기본적으로 입력필드에서 Enter키를 입력하면 form 엘리먼트에서 onsubmit 이벤트가 발생하고, 폼 입력값이 제출된다.

 

repeat

• 키를 계속 누르고 있는지 여부를 확인할 수 있다.
• 키를 계속 누르고 있으면 true값을 반환한다. 기본값은 false다.
• 입력필드에서 키를 계속 눌러서 같은 글자가 계속 입력되는 것을 방지할 때 사용할 수 있다.

 

키보드 이벤트의 활용

• onkeyup 이벤트와 바인딩된 이벤트핸들러 함수에서만 지금 입력한 문자가 포함된 내용을 입력필드에서 읽어올 수 있다.
• onkeyup 이벤트를 활용하면 입력필드에 값이 입력될때마다 입력내용에 대한 작업을 수행할 수 있다.
  (아이디/비밀번호 유효성 체크, 아이디 중복체크 등)
• KeyboardEvent 객체의 key 프로퍼티를 이용하면 지금 입력한 문자를 획득할 수 있고, 특수키에 대한 처리를 수행할 수 있다. 

 

폼 이벤트

 

이런 거 만들었다. 체크박스, 셀렉터, 라디오버튼. 체크박스는 여러 개 선택할 수 있어서 querySelectorAll + 리스트에 넣을 거라 백틱 사용, 셀렉터와 라디오버튼은 1개만 선택 가능하니까 querySelector 사용했다. 보유기술을 누르면 리스트 형식으로 기술명들이 뜨고, 경력을 선택하면 숫자만 바뀌고, 지원분야를 선택하면 : 뒤의 것만 바뀐다.

 

 

 

우리가 많이 사용하는 이벤트 모음

마우스 이벤트

• onclick
• button 클릭시 바운딩된 이벤트핸들러 함수를 실행시킨다.
• a(링크)클릭시 바인딩된 이벤트핸들러 함수를 실행시킨다. (브라우저 기본동작 실행을 막아야 한다.)
• img(이미지) 클릭시 바인딩된 이벤트핸들러 함수를 실행시킨다.
• form의 버튼을 클릭시 바인딩된 이벤트핸들러 함수를 실행시킨다.
• (<button type="button">으로 지정된 버튼에 한함. 그냥 button은 summit이 기본이에용.)

 

• onmouseenter, onmouseleave 혹은 onmouseover, onmouseout.
• 보통 전자 많이 사용함. onmousemove는 우리가 많이 사용 안 함. 
• 위의 이벤트들은 마우스의 움직임에 따라서 스타일이 다르게 적용되는 경우, 메뉴가 표시되거나 사라지게 하는 경우 등에 활용되기 때문에 개발자보다는 퍼블리셔의 작업영역인 경우가 대부분이다.

 

키보드 이벤트. 

onkeydown, onkeyup(주로 뭐가 입력됐는지 궁금할 때.)

• form의 입력필드에서 키보드 입력시 바인딩된 이벤트핸들러 함수를 실행시킨다. (입력값의 유효성 체크작업이 대부분이다.)
• 검색창의 입력필드에서 키보드 입력시 바인딩된 이벤트핸들러 함수를 실행시킨다. (검색어에 대한 자동완성 및 추천 검색어를 표시한다.)

 

폼 이벤트.

onchange

• 체크박스, 라디오버튼, 셀렉터박스의 체크된 항목이나 선택된 항목이 변경될 깨 바인딩된 이벤트핸들러 함수를 실행시킨다. 
• (필수 체크박스의 체크여부 확인, 체크박스/라디오버튼/셀렉터박스의 체크/선택 여부에 따라서 화면의 다른 엘리먼트를 변경할 떄 사용한다.)

onsubmit

• form에 포함된 제출버튼 클릭시 form과 바인딩된 이벤트핸들러함수를 실행시킨다. 

 

 

 

---

 

 

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!