Javascript - event

조혜령·2021년 11월 18일
0

Javascript

목록 보기
10/19

event란??

클릭, hover, 무엇을 적기, enter를 누르는 것, 무엇을 입력하는 것, wifi에서 접속이 끊어졌을 때 등등이 다 event이다.

addEventListener

event를 listen해주는 javascript에게 listen할 event를 추가해준다는 의미이다.
물론 이 목록들을 포함하여 더 있다.
console.dir을 사용하여 여러 property들 중 event들을 찾아볼 수 있다.
property 앞에 on이 적혀있는 것들이 event이다.
사용 시에는 on을 제외하고 사용하면 된다.

  • change : 변화가 있을 때 발생
  • click : click 시 발생
  • focus : focus를 얻었을 때 발생
  • keydown : key를 눌렀을 때 발생
  • keyup : key에서 손을 떼어냈을 때 발생
  • load : load가 완료되었을 때 발생
  • mousedown : mouse를 click 시 발생
  • mouseout : mouse가 특정 개체 밖으로 이탈 시 발생 (자식요소 영역을 떠나도 발생)
  • mouseleave : mouse가 특정 개체 밖으로 이탈 시 발생 (오로지 해당 개체에서만 발생)
  • mouseover : mouse가 특정 개체 위로 올라왔을 때 발생 (자식요소에 mouse가 와도 발생)
  • mouseenter : mouse가 특정 개체 위로 올라왔을 때 발생 (오로지 해당 개체에만 와야지 발생)
  • mousemove : mouse가 움직였을 때 발생
  • mouseup : mouse에서 손을 떼었을 때 발생
  • select : option tag 등에서 선택 시 발생

preventDefault 함수

event의 기본 행동(어떤 function이 발생 시 기본적으로 브라우저에서 생기는 행동)이 발생하지 않게 막는 함수이다.
ex)
form tag가 submit이 될 경우 새로고침이 되는데 이 함수를 발동시켜 막아준다.

대부분 이렇게 쓰인다. 코드 4~7번째 줄

click event 예시

여기서 정해준 title은 .hello 속 h1을 해당하는 것이다.
document.title은 head에 감싸져있는 title tag인 것으로 다르다.


코드를 설명하자면, document.querySelector를 사용하여 hello라는 class를 가진 값 속 h1 tag를 불러온뒤, function ()을 사용해 click 시 나타날 event를 만들어준다.
그 다음 addEventListener을 사용해 click이 된다면 funtion handleTitleClick가 실행되게 만들어주었다.
(11번을 클릭하니 나타난 모습인 것)

10번쨰 줄 코드에서 handleTitleClick 뒤에 ()를 넣으면 사용자가 클릭한 다음이 아닌 바로 실행이 되는 것이기 때문에 ()는 생략한 것이다.

mouseenter event 예시



마우스를 click me! 객체 위로 올렸다가 내렸다가를 6번 반복한 상태이다.

정리





그냥 새로고침 시에는 Click me!
마우스를 올렸을 때는 Mouse is here!
마우스를 내렸을 때는 Mouse is gone!으로 잘 나타난다.

event는 이렇게 onclick 등으로 나타낼 수도 있는데, 22번째줄 코드처럼 addEventListener(event값, 주어질 값);을 선호하는 이유removeEventListener을 이용하여 event listener를 제거할 수 있기 때문이다.

profile
HR velog

0개의 댓글