2021.07.06(Tue.) <DOM의 다양한 이밴트 객체>

1. onsubmit

• 입력받은 정보들을 전송한다.
• 회원가입과 같은 기능에서 입력된 정보들을 전송할 수 있다.

2. onchange

• 데이터 변화를 감지한다.

3.  onmouse 이벤트

1. onmouseenter : 마우스 포인터가 요소안으로 들어왔을 때 발생하는 이벤트이다. ( CSS의  hover 같은 상황 ) 자식 요소도 모두 포함한다. 마우스가 요소 밖으로 나갔다가 다시 들어오지 않는 이상 이벤트는 발동하지 않는다.
2. onmouseover : onmouseenter의 반대의 경우. 영역을 벗어나지 않아도 가능.
3. onmouseout : 위와 반대로,  마우스 포인터가 밖으로 나왔을때 혹은, 자식 요소에 들어가면 발생하는 이벤트.
4.  onmousemove : 마우스 포인터가 요소 안에서 움직일때 발생하는 이벤트.

4. onkey 이벤트

1. onkeyup : 키보드가 올라 올때 발생하는 이벤트
2. onkeydown : 키보드가 눌려졌을때 발생하는 이벤트
3. onkeypress : 키보드가 눌려졌을때 발생하는 이벤트.
   • onkeydown과 달리 키보드가 계속 눌려진 상태에서도 이벤트가 계속 발생하는점이 다르다.

5. event.stopPropagation

• 이벤트 실행시 부모요소의 이밴트 전달을 중지하라는 의미.
• 이벤트는 실행될 시 부모 요소까지 이벤트를 전달한다. 이를 멈춰서 자신이 속한 요소의 이벤트만 실행시킨다.

6.  event.preventDefault

• 페이지를 이동하거나, 혹은 전송 ( 아까 onsubmit ) 등을 사용하였을 때, 페이지가 리로드 되는 것을 막아준다.
• 페이지 리로드를 막기 위하여, event.stopPropagation을 사용한다면, URL이동 자체도 되지 않을 것이다.
• 그래서 지금의 이벤트로 만들어진 상태를 '유지한다'는 의미를 가지고 있는 preventDefault를 사용한다.