🎀 이벤트와 이벤트 핸들러 바로가기 이벤트 연결 (event binding) 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러 함수를 작성해야 한다. 작성된 이벤트 핸들러를 특정 요소(이벤트 소스)에 연결하는 것을 이벤트 연결(event binding)이라고 한다. $(이벤트소스).on("이벤트타입", 이벤트 처리 함수 ); OK text: 아이디 비밀번호 사과 바나나 수박 💡 this 이벤트에 의해 실행되는 함수 안에서 this를 사용할 수 있다. $(this)는 이벤트가 발생한 자기 자신을 감지할 수 있게 된다. 일반적으로 동일한 소스가 반복되는 곳에서 사용된다. 예를들어 class의 이름이 여러 개가 동일한 경우 한 군데에만 이벤트를 주고 싶을 때 사용한다. 동적으로 추가된 DOM 객..
DOM을 이용한 이벤트 처리 방식이다. 이벤트 모델은 다음과 같이 DOM Level 에 따라 분류한다. 총 네가지 방법으로 이벤트를 연결할 수 있다. DOM Level0 인라인 이벤트 모델 기본 이벤트 모델 DOM Level2 마이크로소프트 인터넷 익스플로러 이벤트 모델 표준 이벤트 모델 고전 이벤트 모델 고전 방식은 자바스크립트에서 DOM 객체의 이벤트 속성으로 이벤트를 연결하는 방법이다. document.querySelector(선택자).onXXX = 익명함수; document.querySelector("#id").onclick = func(){ /* 이벤트를 처리할 함수 내용 */ }; # 고전 이벤트 모델 예시 이미지 변경 인라인 이벤트 모델 인라인 이벤트 모델은 HTML 태그 요소 노드에 이벤트..
DOM에서 발생되는 이벤트에 대한 핸들러를 등록하여 특정 이벤트에 대응하는 작업을 할 수 있다. 버튼을 클릭하거나 항목을 선택하는 것을 이벤트라고 한다. 이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행한다. 이벤트 핸들러 또는 이벤트 리스너라 한다. 이벤트의 종류 ✅ 마우스 이벤트 click 클릭 dbclick double click mousedown 요소 위에서 마우스 버튼을 눌렀을 때 mousemove 요소 위에서 마우스 포인터를 움직일 때 mouseover 마우스 포인터가 요소 위로 옮겨질 때 mouseout 마우스 포인터가 요소를 벗어날 때 mouseup 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 ✅ 키보드 이벤트 ..
