[K-MOOC x Coursera ] JavaScript Basic - Module 3 : Events

JavaScript can listen for events and handle them, when they occur. 

자바스크립트는 event가 발생 했을 때, 이를 수신하고 다룰 수 있다.

 

■ onclick  : property

버튼 생성 후 눌렀을 때 경고 (alert)창을 뜨게 할 수도 있고 페이지가 열렸을 때 바로 메세지 창이 뜨게 할 수도 있다. 

 

 

1. 버튼 눌렀을 때 메세지 창 뜨기 : 함수를 이름으로 참조

 

 

 

2. 페이지 열렸을 때 바로 메세지 창 뜨기 : 함수이름을 블록 - ( ) 로 참조해주면 된다. 

   1번의 경우는  ouch 옆에 ( ) 블록이 없음을 확인 할 수 있으니 주의하자요!!

 

 

 

---

 

■ addEventListener();

More morden way of capturing events method.

이 method가 위의 onclick property와의 차이점이 있다면 onclick은 할당하는 항목을 = 으로 할당하는 "Property" 이고 addEventListener은 "method" 이다. 

 

 

 

 

이 method를 아래와 같이 간단하게 표현할 수 도 있다. 근데 이렇게 작성하면 " ; " 을 빼먹거나 괄호 하나를 빼먹는 실수를 할 수도 있으니 죽 늘여서 작성하지 말고 function () { 줄 바꿈 !!! } 해서 보기 쉽게 작성하자요!!

 

---

 

■ The Event Object 

event handlers에 전달하거나 특별하게 접근해야 할 필요성이 있는 경우 사용하는 " The Event Objec"에 대해 알아봅시다.

 

 

function 괄호 안의 " event "는 event object 를 참조하는 변수 이름이고 " event.target "을 통해 어떤 EVENT를 일으키게 할지 확인하거나 설정할 수 있습니다. 

 

button 창의 background가 빨갛게 변한 것을 확인 할 수 있다. 

 

이 외에도 양식 제출시 많이 사용하는 " preventDefault () " 메소드가 있는데 양식의 기본 제출을 방지 하기 위한 메소드 이다. 사용법은 [ event.preventDefault( ) ; ] 이렇게 작성하면 된다. 

 

MDN 에서 정의하기를 이 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다고 한다. 

 

한마디로 알맞지 않은 양식이 제출 되는 것을 방지하는 기능이라고 생각하면 될 것 같다. 이와 관련된 MDN에서 연습하기 좋은 예제들이 있는 것 같으니 링크: MDN-preventDefault란? 걸어두겠다. 

 

---

JavaScript  에서 Events 기능 정리 

• Mouseover & Mouseout
• Submit + <form>태그의 action
• Scroll Events / Window Resizing / Key Down Events
• (참고) MDN : Event Reference
• (참고) MDN : Introduction to events

---