자바스크립트 강좌27 7.2 Event Method를 이용한 이벤트 처리 7.2 Event Method를 이용한 이벤트 처리 방금 전 이벤트 속성을 이용한 이벤트 처리 방법은 요소에 이벤트 속성을 이용하여 이벤트를 처리하는 형태에 대해서 알아보았습니다. 이 방법은 HTML 요소 태그 내에 JavaScript 코드가 혼용되어 사용되는 조금은 HTML 코드와 JavaScript를 코드 분리와 같은 원칙이 조금은 아쉬운 이벤트 처리 방법이었습니다. 이번에는 편리하게 addEventListener(), removeEventListener() 메서드를 이용하여 이벤트를 처리하는 방법에 대해서 알아봅니다. 7.2.1 addEventListener() 메서드를 이용한 이벤트, 이벤트 핸들러 추가 addEventListener() 메서드는 img, p 등과 같은 HTML DOM 요소에 특정.. 2013. 8. 6. 7.1.4 폼(Form)과 관련된 이벤트 핸들러 속성 7.1.4 폼(Form)과 관련된 이벤트 핸들러 속성 폼(form)과 관련된 이벤트는 하나의 form 요소 안에 동작에 의해서 이벤트가 발생하는것과 관련되며 특별한 경우를 제외하고 거의 모든 HTML 요소들에 적용되며 이와 관련한 이벤트 핸들러를 요약하면 다음과 같습니다. 이벤트 핸들러 속성 설명 onblur 요소가 초점(focus)을 잃었을 때 발생하는 blur 이벤트 처리 onfocus 요소가 초점(focus)을 받았을 때 발생하는 focus 이벤트 처리 oncontextmenu 마우스 오른쪽 버튼을 클릭하면 발생하는 contextmenu 이벤트 처리 onchange 요소에 어떤 변화가 발생했을 때 발생하는 onchange 이벤트 처리 onselect input 요소나 textarea 요소의 텍스트(.. 2013. 8. 6. 7.1.3 키보드(Keyboard)와 관련된 이벤트 핸들러 속성 7.1.3 키보드(Keyboard)와 관련된 이벤트 핸들러 속성 웹환경에서 요사이 스마트폰이 대두되면서 새롭게 조명되고 있는 터치스크린을 통한 입력을 제외하고 마우스와 더불어 입력장치로 주로 사용하는 키보드와 관련된 이벤트와 해당 이벤트가 발생하면 처리해주는 이벤트 핸들러 속성을 정리하면 다음과 같습니다. 이벤트 핸들러 속성 설명 onkeydown 키보드의 자판키가 눌려졌을 때 발생하는 keydown 이벤트 처리 onkeypress 키보드의 자판키가 눌려지고 올라올 때 발생하는 keypress 이벤트 처리 onkeyup 눌려진 자판키가 올라올 때 발생하는 keyup 이벤트 처리 그래서 이벤트의 발생 순서는 keydown -> keypress -> keyup 의 순으로 발생하며 상황에 따라 keydown,.. 2013. 8. 6. 7.1.2 마우스(Mouse)와 관련된 이벤트 핸들러 속성 7.1.2 마우스(Mouse)와 관련된 이벤트 핸들러 속성 웹 환경에서 가장 많이 사용하는 입력장치 중에 하나인 마우스(mouse)와 관련된 이벤트들 중에 주요 이벤트와 이와 관련된 이벤트 핸들러 속성을 정리하면 다음과 같습니다. 이벤트 핸들러 속성 설명 onclick 마우스를 클릭하면 발생하는 click 이벤트 처리 ondblclick 마우스를 더블 클릭하면 발생하는 click 이벤트 처리 onmousedown 마우스의 버튼이 눌려질 때 발생하는 mousedown 이벤트 처리 onmousemove 마우스의 포인터가 움직일 때 발생하는 mousemove 이벤트 처리 onmouseout 마우스 포인터가 요소 밖으로 벗어났을 때 발생하는 mouseout 이벤트 처리 onmouseover 마우스 포인터가 요소.. 2013. 8. 6. 이전 1 2 3 4 5 ··· 7 다음