Event

• '사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건'

• [예시.] 웹에서 발생하는 이벤트
  • 웹페이지 사용자가 버튼을 클릭 (클릭 이벤트)
  • 웹페이지 사용자가 키보드를 눌렀을 때 (키다운 이벤트)
  • 웹페이지 사용자가 입력 폼의 내용을 제출 (제출 이빈트)
  • ... 등등

이벤트를 사용하려면?

• 각각의 이벤트들은 이벤트 핸들러(handler)를 가짐.

• 이벤트 핸들러(handler)
  • 이벤트가 발생되면 실행될 코드 블럭.
  • 주로 함수가 이 역할을 담당.
    • 이벤트 핸들러 역할을 수행할 람수를 정의하는 것을 이벤트 핸들러 등록이라 한다.
    • => event handler register : 이벤트가 발생하면, 이 함수를 호출해라.

event handler 예시.

• 웹 사용자가 버튼(button) 요소를 클릭 했을 때, 경고 다이얼로그 박스를 띄워 환영의 메세지를 보여주자.

  • const handleClick = function() {  // 'handleClick' 함수가 다이얼 로그를 호출하는 기능
      window.alert("환영합니다.")
    }
    
     const button = document.querySelsctor("button")  // button 
    
     button.onclick = handleClick  // (중요!) button에 onclick 이벤트 속성 부여

기본 형태

• 이벤트가 발생할 수 있는 (or 발생할 예정) 타겟을 선택하고, 이벤트 핸들러 속성에 이벤트 핸들러를 대입

  • 타겟.on이벤트명 = 이벤트핸들러함수
      
     button.onClick = handleClick

주의사항

• 이벤트 핸들러를 등록하기 위해 이벤트 속성에 대입하는 것과 함수 호출문을 대입하는 것은 다르다.

  • 꼭 함수 이름만 대입해야지 이벤트 핸들러 속성이 정상적으로 작동한다.

  • // handleClick 함수를 대입한다 ( 이벤트 핸들러 등록 )
     button.onclick = handleClick
    
     // handleClick 호출 후 반환값을 대입한다 (X)
     button.onclick = handleClick ()