WEB/JavaScript43 이벤트 : 기본 이벤트 취소 기본 이벤트 * 웹 브라우저의 기본 요소들의 기본 동작* 예 ) a 태그를 클릭하면 href 속성의 URL로 이동한다. 예 ) 폼에서 submit을 누르면 데이터가 전송된다. 예 ) 텍스트 필드에 포커스를 맞춘 상태에서 키보드로 켁스트를 입력할 수 있다. 1. inline* 이벤트의 리턴 값이 false 이면 이벤트가 취소된다. - 예제 >실행 화면 링크실행 화면 링크실행 화면 링크 2016. 10. 17. 이벤트 : 전파 이벤트 전파* 부모 - 자식의 계층 구조로 이루어진 각각의 요소에 이벤트를 부여할 때 이벤트 순서를 정할 수 있다. 1. 캡처링 ( Capturing )* 부모노드에서 자식노드로 이벤트가 전파된다.* 낮은 IE 버전에서는 작동하지 않아 선호되는 방식은 아니다.* item.addEventListener("이벤트 타입", 이벤트 핸들러, true); 2. 버블링 ( Bubbling )* 자식 노드부터 부모 노드로 이벤트가 전파된다.* item.addEventListener("이벤트 타입", 이벤트 핸들러, false); 3. 캡처링과 버블링 예제 one two three 위의 예제 코드를 계층화 해서 보면 아래와 같다 캡처링 이벤트 전파일 때 버블링 전파일 때 4. 이벤트 전파 차단* 다층 구조의 노드에 이.. 2016. 10. 16. 이벤트 : 등록방법 1. inline* 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.* 이벤트의 소재를 파악하기 용이하다.* 정보인 HTML과 제어인 JavaScript가 혼재되어 좋은 방식은 아니다. ☆ 이벤트가 발생한 대상을 원하는 경우 this를 이용해 참조할 수 있다. - 자기 자신을 참조- this를 이용해 참조 2. Property Listener* 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록한다.* HTML과 JavaScript를 분리한다. ☆ 이벤트가 실행된 맥락의 정보가 필요할 때 이벤트 객체를 이용한다. 이는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다. 3. addEventListener()* 이벤트를 등록하는 가장 권장되는 방법* 여러개의 이벤트 핸들러를 등록할 수 있다. -.. 2016. 10. 16. 이벤트 이벤트* 어떤 사건을 의미한다.* 사용자가 클릭했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꿨을 '때' * 개발자가 어떤일이 발생했을 때 실행되어아얄 코드를 등록하고, 브라우저는 그 일이 발생했을 때 코드를 실행한다. 이러한 방식을 이벤트 프로그래밍이라고 한다. onclick 속성을 생각하면 쉽다. * event target : 이벤트가 일어날 객체* event type : 이벤트의 종류를 의미한다. click 또는 scroll ( 사용자가 스크롤을 움직였을 때 ), mousemove ( 사용자가 마우스를 움직였을 때 )* event handler : 이벤트가 발생했을 때 동작하는 코드이다. >>>>>이벤트 타입의 종류 링크 2016. 10. 16. 이전 1 2 3 4 5 ··· 11 다음 반응형
