Study Memos/JavaScript Front-End (48) 썸네일형 리스트형 이벤트 타입 - 폼 (Section 41) 참고> opentutorials.org/course/1375/6762 1. submit : 폼의 정보를 서버로 전송하는 명령인 submit을 할 때 발생하는 이벤트 - form 태그에 적용됨 2. change: 폼 컨트롤이 값이 변경되었을 때 발생하는 이벤트 3. blur: 포커스가 사라졌을 때 발생하는 이벤트 4. focus: Element에 포커스가 생겼을 때 발생하는 이벤트 이벤트 타입 (Section 40) 참고> opentutorials.org/course/1375/6764 1. 이벤트 타입: 이벤트의 종류이다. -> 웹브라우저는 많은 종류의 이벤트 타입을 제공해줌. ex) 폼, 문서 로딩, 마우스.. 이벤트 기본 동작의 취소 (Section 39) 참고> opentutorials.org/course/1375/6769 1. 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있음. 2. 인라인 방식 혹은 프로퍼티에 event를 등록할 경우 event 핸들러에서 리턴 값을 false로 하면 이벤트 기본 동작을 취소할 수 있음. 3. addEventListener()에서는 event.preventDefault() 를 호출해야 한다. -> IE9 이하 버전에서는 preventDefault() 가 없으므로 event.returnValue를 false로 해야 한다. 이벤트 전파 (버블링과 캡처링) (Section 38) 참고> opentutorials.org/course/1375/6768 1. 캡처링(Capturing) : 조상에게서 event가 발생하여 후손들에게 event가 내려가는 방식 -> 부모가 포함하고 있는 자식에게 어떤 이벤트가 발생하고, 해당 이벤트에 대한 핸들러를 부모와 자식이 모두 가지고 있으면 부모의 event handler 호출 후 자식의 event handler가 호출됨. -> addEventListener()를 호출할 때 세번째 인자를 true로 두면 캡처링이 됨. -> IE의 예전 버전에서는 지원되지 않던 기능이기 때문에 실제로는 많이 사용되지 않음. 2. 버블링(Bubbling) : 후손에게서 event가 발생하여 조상들에게 event가 올라가는 방식 -> 실제로 많이 사용됨 -> addEv.. 이벤트 등록 방법 - addEventListener() 함수 (Section 37) 참고> opentutorials.org/course/1375/6761 1. 이벤트 등록 방법 중 많이 권장되는 방식 2. ie8 이하에서는 addEventListener가 없으므로 attachEvent를 참조해야 함 (최근에는 라이브러리들이 알아서 크로스 브라우징 이슈를 해결해 줌) 3. 코드 재활용성이 좋음 이벤트 등록 방법 - 프로퍼티 리스너 (Section 36) 참고> opentutorials.org/course/1375/6760 1. event target의 프로퍼티(onClick 등..)에 함수를 선언해서 넣어줌. -> 함수의 첫번째 인자로는 event 객체를 받음. (event 객체는 event가 발생할 당시의 정보를 담고 있는 객체) -> IE 8 이하에서는 이벤트 함수의 파라미터로 event 객체를 받지 않음. 이 경우 window.event 객체를 직접 참조해야함. -> IE 8 이하에서의 차이로 발생하는 크로스 브라우징 이슈는 프로그래머가 대응해주어야 하지만, 많은 경우 라이브러리가 이러한 크로스 브라우징 이슈를 처리해주기 때문에 너무 걱정할 필요는 없음. 이벤트 등록 방법 - inline (Section 35) 참고> opentutorials.org/course/1375/6759 1. 인라인(inline) 방식: Tag안에 이벤트 속성이 바로 적혀있는 방식 2. 장점: Tag에 직접 기술되기 때문에 어느 객체에 바인딩되어 있는지에 대해 한눈에 파악이 가능 3. 단점: Tag에 직접 기술되기 때문에 디자인 패턴 측면에서는 부정적인 영향을 줄 수 있음 이벤트 (Section 34) 참고> opentutorials.org/course/1375/6629 1. Event Target: 이벤트가 발생하는 대상 2. Event Type: 이벤트가 발생하는 동작 (ex) onClick, onChange.. 3. Event Handler: 이벤트를 처리하는 함수 이전 1 2 3 4 5 6 다음