목록Study Memos/JavaScript Front-End (48)
KorSA
참고> opentutorials.org/course/1375/6769 1. 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있음. 2. 인라인 방식 혹은 프로퍼티에 event를 등록할 경우 event 핸들러에서 리턴 값을 false로 하면 이벤트 기본 동작을 취소할 수 있음. 3. addEventListener()에서는 event.preventDefault() 를 호출해야 한다. -> IE9 이하 버전에서는 preventDefault() 가 없으므로 event.returnValue를 false로 해야 한다.
참고> opentutorials.org/course/1375/6768 1. 캡처링(Capturing) : 조상에게서 event가 발생하여 후손들에게 event가 내려가는 방식 -> 부모가 포함하고 있는 자식에게 어떤 이벤트가 발생하고, 해당 이벤트에 대한 핸들러를 부모와 자식이 모두 가지고 있으면 부모의 event handler 호출 후 자식의 event handler가 호출됨. -> addEventListener()를 호출할 때 세번째 인자를 true로 두면 캡처링이 됨. -> IE의 예전 버전에서는 지원되지 않던 기능이기 때문에 실제로는 많이 사용되지 않음. 2. 버블링(Bubbling) : 후손에게서 event가 발생하여 조상들에게 event가 올라가는 방식 -> 실제로 많이 사용됨 -> addEv..
참고> opentutorials.org/course/1375/6761 1. 이벤트 등록 방법 중 많이 권장되는 방식 2. ie8 이하에서는 addEventListener가 없으므로 attachEvent를 참조해야 함 (최근에는 라이브러리들이 알아서 크로스 브라우징 이슈를 해결해 줌) 3. 코드 재활용성이 좋음
참고> opentutorials.org/course/1375/6760 1. event target의 프로퍼티(onClick 등..)에 함수를 선언해서 넣어줌. -> 함수의 첫번째 인자로는 event 객체를 받음. (event 객체는 event가 발생할 당시의 정보를 담고 있는 객체) -> IE 8 이하에서는 이벤트 함수의 파라미터로 event 객체를 받지 않음. 이 경우 window.event 객체를 직접 참조해야함. -> IE 8 이하에서의 차이로 발생하는 크로스 브라우징 이슈는 프로그래머가 대응해주어야 하지만, 많은 경우 라이브러리가 이러한 크로스 브라우징 이슈를 처리해주기 때문에 너무 걱정할 필요는 없음.
참고> opentutorials.org/course/1375/6759 1. 인라인(inline) 방식: Tag안에 이벤트 속성이 바로 적혀있는 방식 2. 장점: Tag에 직접 기술되기 때문에 어느 객체에 바인딩되어 있는지에 대해 한눈에 파악이 가능 3. 단점: Tag에 직접 기술되기 때문에 디자인 패턴 측면에서는 부정적인 영향을 줄 수 있음
참고> opentutorials.org/course/1375/6629 1. Event Target: 이벤트가 발생하는 대상 2. Event Type: 이벤트가 발생하는 동작 (ex) onClick, onChange.. 3. Event Handler: 이벤트를 처리하는 함수
참고> opentutorials.org/course/1375/7112 1. 문서에 나타나는 Element의 크기, 위치, 스크롤 등을 조작하는 방법을 공부해보자 2. GetBoundingClientRect(): 객체의 기하학적 특징을 알 수 있음 -> IE는 width, height를 제공해주지 않음 3. offsetParent: 기하학적 값들의 기준이 되는 객체를 나타냄 4. Viewport: 문서가 너무 길거나 넓을 경우 사용자에게 보여주는 영역 5. pageYOffset: 사용자가 세로 스크롤을 움직인 offset 6. 사실 GetBoundingClientRect()로 얻는 값은 body 태그와의 거리가 아닌 Viewport와의 거리이다. 7. scrollTo() 함수: 스크롤을 파라미터로 전달받은..
참고> opentutorials.org/course/1375/6746 1. appendData(), deleteData(), insertData(), replaceData(), substringData() : 문자열(TEXT) 조작 함수들
참고> opentutorials.org/course/1375/6745 1. nodeValue, data : Text 객체의 값을 제공