[JavaScripts] Event/이벤트

Event

• HTML요소에서 발생하는 모든 상황을 의미한다.
• 사용자가 웹 페이지의 버튼을 클릭한다면 클렉이 대한 이벤트가 발생하고,
  우리는 이벤트를 통해 클릭이라는 사건에 대한 결과를 받거나, 조작 할 수 있다.
• Event Object
• 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체이다.
• 이벤트가 발생했을 때 생성되는 객체이다.
• DOM 요소는 Event를 받고 받은 Event를 처리 할 수 있다.
• 처리는 주로 addEventListener()메서드를 사용한다.
• Event handler
• 웹 페이지에서 발생하는 Event에 대해 반응하여 동작하는 함수를 지칭한다.
• 이벤트가 발생했을때 호출되며, Event객체를 매개변수로 전달받는다.
• 예시
• EventTarget.addEventListener(type, handler function)
  EventTarget에 특정Event => type가 발생하면, 무슨 일을 할 지 handler function을 등록
• type의 예시 : input, click, submit... jeeny-daru type종류
• 화살표 함수는 상위 스코프를 지칭하기 때문에 window객체가 바인딩된다.
  그렇기때문에 addEventListener의 콜백함수는 function키워드를 사용해야 한다.

Event 실습

button

• 버튼을 클릭하면 특정 변수 값 변경하기


input

• input에 값을 입력하면 입력된 값을 화면에 출력하기


Event 이벤트 취소

• 웹 페이지 내용을 복사하지 못하도록 하기


로또 번호 만들어 보기

• lodash 활용 yongseong - lodash

Event 전파

• DOM요소에서 발생한 이벤트가 상위 노드에서 하위 노드, 혹은 하위 노드에서 상위 노드로 전파되는 현상을 뜻한다.
• 이벤트가 발생하면 그 발생한 요소에 그치지 않고 어딘가로 그 이벤트가 흘러서 그 요소에도 이벤트가 발생한다는 것이다.

예시

• 아래 코드처럼 영역 표시

• SPAN영역 클릭 시 상위 영역인 P영역, DIV영역도 클릭 이벤트가 전파된다.

• event.stopPropagation(); - 상위 이벤트로의 전파를 중단한다.
  event.stopImmediatePropagation(); - 같은 레벨로의 전파를 중단한다.
event.preventDefault() - 현재 Event의 기본 동작을 중단한다.

참고

JavaScripts 이벤트long4jae