반응형
1. 이벤트 처리기와 HTML 엘리먼트
- 메모리 누수 해결을 위해서는 IE 를 위한 프로그램에서는 최대한 중첩된 함수를 작성하지 않는다.
다른 방법은 onunload() 이벤트가 발생하면 모든 이벤트 처리기를 주의해서 제거한다.
| 이벤트 처리기 | 호출 시점 | 지원되는 엘리먼트 |
| ondblclick | 더블클릭한 경우 | 대부분의 엘리먼트 |
| onclick | 마우스를 눌렀다 떤 경우, mouseup 이벤트 후에 연달아 발생함. 기본 동작을 취소하기 위해서는 false를 반환 | 대부분의 엘리먼트 |
| onkeydown | 키를 누른 경우. 취소하려면 false를 반환 | <body> <form> |
| onload | 문서 로딩이 끝난 경우 | <body>, <frameset>, <img> |
| onunload | 문서나 프레임셋을 언로드한 경우 (해당 페이지에서 빠져나가는 경우) | <body>, <frameset> |
| onblur | 마우스 포인터나 입력 커서가 엘리먼트를 멋어나 입력 포커스를 잃어버리는 경우 | <body>, <label>, <button>, <input>, <select>, <textarea> |
| onchange | 다른 폼 엘리먼트의 값이 변한경우 | <input>, <select>, <textarea> |
- onsubmit, onclick, onkeydown, onkeypress, onmousedown, onmouseup, onreset
. false 를 반환하면 행동이 실행되는 것을 취소할 수 있다.
- onmouseover
. window status line 에 연결된 링크 url 을 보여주는 것을 막을려면 true 를 반환한다.
2. 이벤트 전파
- 이벤트 포착(capture) 단계에서는 Document 객체에서 시작하여 문서 트리 아래쪽으로 이벤트가 전파된다.
- 대상 노드에 직접 등록되어 있는 적절한 이벤트 처리기가 실행된다.
- 문서 계층 구조에 따라 대상 엘리먼트에서 Document 객체로 이벤트가 되돌아가는 bubbling phase 단계이다.
- Event.stopPropagation() 메소드를 호출하여 더 이상 이벤트가 전파되는 것을 막을 수 있다.
- Event.preventDefault() 메소드를 호출하여 <a> 클릭의 경우 기본 이벤트 처리 3단계를 거친 후 브라우저가
하이퍼 링크를 따라가는 기본적인 동작을 막을 수 있다.
3. Event 객체의 프로퍼티
- type
. 이벤트의 타입, click, mouseover 등
- target
. 이벤트가 발생한 노드
- currentTarget
. 이벤트를 처리하고 있는 노드. 만약 이벤트가 포착단계나 bubbling 단계에서 처리되는 중이라면
이 프로퍼티의 값은 target 과 다르다.
- eventPhase
. Event.CAPTURING_PHASE, Event.AT_TARGET, Event.BUBBLING_PHASE 상수 값 중 하나이다.
- bubbles
. 이벤트가 문서 트리를 따라 위로 올라가는지를 나타내는 부울 값
- cancelable
. preventDefault() 메소드를 사용하여 이벤트의 기본 행동을 취소할 수 있는지 나타내는 부울 값
4. MouseEvent 의 프로퍼티
- Button
. mousedown, mouseup, click 이벤트 동안 어떤 마우스 버튼의 상태가 바뀌었는지를 나타낸다.
버튼의 상태가 바뀌었을 때만 사용된다. 0 : 왼쪽 버튼, 1: 가운데 버튼, 2: 오른 쪽 버튼
- clientX, clientY
. 문서의 얼마나 스크롤되었는지는 상관 없이 화면상 가장 위쪽 지점에서 이벤트가 발생했으면
clientY 값은 0 이다.
. IE 이외의 다른 브라우저에서는 window.pageXOffset 과 window.pageYOffset 을 더해 줘서
창에 대한 좌표를 문서에 대한 좌표로 바꿔줄 수 있다.
- screenX, screenY
. 마우스 포인터가 사용자 모니터의 왼쪽 상단부분에 대해 상대적으로 어디에 위치하는지를 나타냄
5. IE 에서 이벤트 처리기와 메모리 누수
- IE 에서는 중첩된 함수를 이벤트 처리기로 사용할 때 메모리 누수가 발생하기 쉽다.
- 아래 함수가 호출되면 주어진 폼 엘리먼트에 이벤트 처리기가 추가된다.
- 함수는 폼 엘리먼트를 참조하지 않지만 클로저의 일부분으로 인식되는 유효범위는 폼 엘리먼트를 참조한다.
- 폼 엘리먼트는 자바 스크립트 function 객체를 참조하고 이 객체는 폼객체를 참조한다.
. false 를 반환하면 행동이 실행되는 것을 취소할 수 있다.
- onmouseover
. window status line 에 연결된 링크 url 을 보여주는 것을 막을려면 true 를 반환한다.
2. 이벤트 전파
- 이벤트 포착(capture) 단계에서는 Document 객체에서 시작하여 문서 트리 아래쪽으로 이벤트가 전파된다.
- 대상 노드에 직접 등록되어 있는 적절한 이벤트 처리기가 실행된다.
- 문서 계층 구조에 따라 대상 엘리먼트에서 Document 객체로 이벤트가 되돌아가는 bubbling phase 단계이다.
- Event.stopPropagation() 메소드를 호출하여 더 이상 이벤트가 전파되는 것을 막을 수 있다.
- Event.preventDefault() 메소드를 호출하여 <a> 클릭의 경우 기본 이벤트 처리 3단계를 거친 후 브라우저가
하이퍼 링크를 따라가는 기본적인 동작을 막을 수 있다.
3. Event 객체의 프로퍼티
- type
. 이벤트의 타입, click, mouseover 등
- target
. 이벤트가 발생한 노드
- currentTarget
. 이벤트를 처리하고 있는 노드. 만약 이벤트가 포착단계나 bubbling 단계에서 처리되는 중이라면
이 프로퍼티의 값은 target 과 다르다.
- eventPhase
. Event.CAPTURING_PHASE, Event.AT_TARGET, Event.BUBBLING_PHASE 상수 값 중 하나이다.
- bubbles
. 이벤트가 문서 트리를 따라 위로 올라가는지를 나타내는 부울 값
- cancelable
. preventDefault() 메소드를 사용하여 이벤트의 기본 행동을 취소할 수 있는지 나타내는 부울 값
4. MouseEvent 의 프로퍼티
- Button
. mousedown, mouseup, click 이벤트 동안 어떤 마우스 버튼의 상태가 바뀌었는지를 나타낸다.
버튼의 상태가 바뀌었을 때만 사용된다. 0 : 왼쪽 버튼, 1: 가운데 버튼, 2: 오른 쪽 버튼
- clientX, clientY
. 문서의 얼마나 스크롤되었는지는 상관 없이 화면상 가장 위쪽 지점에서 이벤트가 발생했으면
clientY 값은 0 이다.
. IE 이외의 다른 브라우저에서는 window.pageXOffset 과 window.pageYOffset 을 더해 줘서
창에 대한 좌표를 문서에 대한 좌표로 바꿔줄 수 있다.
- screenX, screenY
. 마우스 포인터가 사용자 모니터의 왼쪽 상단부분에 대해 상대적으로 어디에 위치하는지를 나타냄
5. IE 에서 이벤트 처리기와 메모리 누수
- IE 에서는 중첩된 함수를 이벤트 처리기로 사용할 때 메모리 누수가 발생하기 쉽다.
- 아래 함수가 호출되면 주어진 폼 엘리먼트에 이벤트 처리기가 추가된다.
- 함수는 폼 엘리먼트를 참조하지 않지만 클로저의 일부분으로 인식되는 유효범위는 폼 엘리먼트를 참조한다.
- 폼 엘리먼트는 자바 스크립트 function 객체를 참조하고 이 객체는 폼객체를 참조한다.
function addValidationHandler(form) {
form.attachEvent("onsubmit", function() { return vallidate(); });
}
form.attachEvent("onsubmit", function() { return vallidate(); });
}
- 메모리 누수 해결을 위해서는 IE 를 위한 프로그램에서는 최대한 중첩된 함수를 작성하지 않는다.
다른 방법은 onunload() 이벤트가 발생하면 모든 이벤트 처리기를 주의해서 제거한다.
반응형
