Adding the Interactivity

  • 함수를 실행하는 거는 우리에게 달려있다.
  • 특별한 event 기반으로 함수를 호출하는 게 낫다.
  • javascript API는 우리가 동적으로 함수를 호출할 수 있게 한다.

Events

  • onclick
    • HTML element 클릭
  • onmouseover
    • HTML element 위에 마우스 움직임
  • onresize
    • 브라우저 window가 resize 될때
  • onload
    • 브라우저가 페이지 로딩을 마칠 때

How it works

  • 어떤 element라도 event에 반응할 수 있다.
  • 태그에 event를 추가할 필요가 있다.
<div onclick = "message()"> click </div>

Using Quotes

  • 이벤트 결과를 위해 ‘ or ” 를 사용할 수 있다.
  • ” 는 String 파라미터를 사용할 때 유용하다.
  • Quotes를 복사 붙여넣기할 때 조심하라. (다른 문자가 될 수 있다)
<div onclick = "message('Hi')">
<div onclick = 'message('HI')'>  'message(' , ')'

Events Change The Program Flow

  • 프로그램은 순서대로 동작한다. (step-by-step)
  • DOM은 항상 event를 대기하고 있어서 event는 프로그램이 계속 실행하게 만든다.
  • event가 너무 많으면 페이지 실행이 느려진다.

Review

  • 이벤트 없이 자바스크립트는 DOM과 소통하는 능력이 제한된다.
  • 이벤트는 좋으나 성가시게 할 수 있다.
  • 다른 이벤트를 기억하는것에 대해 걱정하지 마라. 필요할 때 보면 된다.