[스터디] Ajax 마스터하기, Part 6: DOM-기반 웹 애플리케이션 구현하기

출처 : http://www.ibm.com/developerworks/kr/series/web/index.html
아래 내용은 위 출처의 기사의 일부를 복사 후 편집/수정한 것입니다.
단순히 개인적으로 알고자하는 내용만을 남긴 것이니, 자세한 정보는 위의 출처를 참조하세요.

HTML의 마지막 포인트

폼에 있는 버튼이 제출 버튼이 아닌 button 유형이라는 것이다. 제출 버튼을 사용할 경우, 버튼을 누르면 브라우저가 폼을 제출하게 된다. 물론, 이 폼은 어떤 action 애트리뷰트(완전히 의도적인)가 없기 때문에, 이것은 어떤 액티비티도 없는 무한 루프만을 만들게 된다. (직접 실험해 봐도 좋다.) 정상적인 인풋 버튼을 사용하고, 제출 버튼을 피하면, JavaScript 함수를 버튼에 연결하고 폼을 제출하지 않고 브라우저와 인터랙팅 한다.

이벤트 핸들러 다루기

HTML을 보면, 여기에서 여러분이 다루는 이벤트가 onClick이라는 것을 알 수 있다. JavaScript에서, 이 이벤트는 버튼의 onclick 속성을 사용하여 이벤트를 참조할 수 있다. (HTML에서, 이 속성은 onClick으로 참조된다. 대문자 C라는 것을 주목하라. JavaScript에서는 소문자 c를 사용한 onclick 이다.) 따라서, 버튼에 대해 실행되는 이벤트를 변경할 수 있다: 새로운 함수를 onclick 속성으로 할당하면 된다.

onclick 속성에는 함수의 스트링 이름이 아닌 함수 레퍼런스가 입력되어야 한다. 하지만 함수 자체에 대한 레퍼런스이다. JavaScript에서는 함수를 괄호가 없는 이름으로 참조할 수 있다. 따라서 버튼이 클릭될 때 실행되는 함수를 다음과 같이 변경할 수 있다: