JS 학습 노트 6_이벤트

##1.이벤트 버블링##

안에서 밖으로의 이벤트 전파 (화면에서 화살이 튀어나오는 느낌)

##2.이벤트 캡처##

표에서 리로의 이벤트 전파 (지배지에 힘을 통하는 느낌)

##3.DOM 이벤트 플로우 (DOM2 레벨)##

이벤트 캡처 단계 -> 목표 단계 -> 이벤트 버블링 단계 (바늘을 화면에 찔러넣어, 바느질하는 느낌)

이벤트 캡처는 DOM 트리 뿌리에서 잎으로의 이벤트 전파이므로, 뿌리에 가까운 위치에서 이벤트를캡처(event.stopPropagation) 하여, 잎이 이벤트 신호를 받지 못하게 할 수 있습니다

이벤트 버블링은 잎에서 뿌리로의 원로 복귀 프로세스이므로, 뿌리에 가까운 위치에서 잎의 이벤트를집중 처리(event.target) 할 수 있습니다. 이것이 소위 이벤트 위임으로, 집중 처리로 여러 잎에 이벤트 핸들러를 바인드하는 것을 피하고, 응답 속도 저하를 방지할 수 있습니다

목표 단계는 사양 규범 요구이지만, 브라우저는 별로 서포트하지 않습니다

주의: [IE9+] 는 이벤트 캡처를 서포트하며, 이벤트 버블링은전 브라우저 서포트입니다

##4.이벤트 핸들러를 추가하는 몇 가지 방법##

1. HTML: on 이벤트 이름 = strCode 이벤트 처리 함수가 직접 액세스할 수 있는 속성 = 글로벌 속성 + 요소가所在한 form 중의 속성 + 요소 자신의 속성

자동의 스코프 확장 방식은 이하에 상당:

    function(){
      with(document){//글로벌 속성
        with(this.form){//폼 속성
          with(this){
            //자신 속성
          }
        }
      }
    }
    

이벤트 처리 ��수는 이들 많은 속성에 직접 액세스할 수 있으므로, 이렇게 할 수 있습니다:

    <form method="post">
      <input type="text" name="user_name" value="">
      <input type="button" value="사용자명 취득" onclick="alert(user_name.value)">
    </form>
    

2. DOM0 레벨: elem.on 이벤트 이름 = functionName/null;

이 방식으로 추가된 이벤트 핸들러는 버블링 단계에서 실행되며, 직접 액세스할 수 있는 속성 = 글로벌 속성 + 요소 자신의 속성

3. DOM2 레벨: (현대 브라우저가 서포트하는) elem.add/removeEventListener(이벤트 이름，functionName, false/true);

false 는 이벤트 버블링 단계에서 추가하는 것을 나타내고, true 는 이벤트 캡처 단계에서 추가하는 것을 나타냅니다. 직접 액세스할 수 있는 속성은 상기 동일

4. [IE8-]: elem.attach/detachEvent(on 이벤트 이름(on 을 버려서는 안 됩니다）, functionName);

직접 액세스할 수 있는 속성은글로벌 속성のみ이며, moreover 동일 이벤트에 추가된 복수의 핸들러 중에서, 마지막에 추가된 것이 먼저 실행되며, DOM2 레벨 표준과 역입니다

P.S.[IE8-] 는 이벤트 버블링만 서포트하므로, 제 3 파라미터가 없고, 디폴트 (也只能是) 이벤트 버블링 단계에서 추가

##5.이벤트 오브젝트의 용도는?##

btn.onclick = function(event){
  //event.target;이벤트 소스 취득
  //event.preventDefault();디폴트 동작 취소, 예를 들어 링크의 점프 동작
  //event.stopPropagation();이벤트 전파 차단
  //还有一些不常用的
}

주의: 상기 코드는전 브라우저 호환이 아닙니다. 이벤트 오브젝트의 속성도 완전하지 않습니다. 상세 정보는 [JS 原生 이벤트 처리 (크로스 브라우저)](/articles/js 原生事件 처리（跨浏览器）/) 참조

##6.이벤트 분류##

1. UI 이벤트

2. 포커스 이벤트

3. 마우스 이벤트

4. 휠 이벤트

5. 텍스트 이벤트

6. 키보드 이벤트

7. 합성 이벤트 (IME 로 입력)

8. 변동 이벤트 (DOM 구조 업데이트)

9. HTML5 이벤트

10. 디바이스 이벤트 (특정 디바이스, 예를 들어 게임기)

11. 터치와 제스처 이벤트

##7.이벤트 위임##

이벤트 버블링을 이용하여 이벤트 핸들러를 삭감하고, 성능을 향상. document 오브젝트에 이벤트 핸들러를 추가하여, 더 짧은 인터랙션 준비 시간을 구하는 것조차 가능합니다 (페이지 요소와 이벤트 핸들러의 연결 확립에 시간이 필요)

이벤트 위임의 이점:

1. 이벤트 핸들러 설정에 필요한 시간이 더 적음. DOM 액세스 횟수가 줄어들기 때문

2. 점유 메모리 공간이 더 적음. 이벤트 핸들러가 줄어들기 때문

3. 인터랙션 준비 시간이 짧아짐. 페이지 요소와 이벤트 핸들러 사이에서 확립이 필요한 연결이 줄어들기 때문

4. 페이지 응답 속도가 빨라짐. 페이지 요소와 이벤트 핸들러 사이에서 확립하는 연결이 줄어들기 때문

##8.이벤트 핸들러를 삭제할 때의 주의사항##

대상 요소가 DOM 트리에서 삭제되기 전에, 수동으로 바인드된 이벤트 핸들러를 삭제하고, 무효한 이벤트 핸들러가 메모리를 점유하는 것을 피해야 함

페이지 unload 전에, 페이지 중의 모든 이벤트 핸들러를 수동으로 삭제하는 것이 최선. [IE8-] 는 페이지 unload 시, 이벤트 핸들러가 메모리 중에 체류하기 때문. unload 이벤트 핸들러 중에서 삭제 가능

이벤트 핸들러를 삭제하는실질은, 페이지 요소와 이벤트 핸들러 사이의 연결을 차단하는 것

##9.이벤트를 시뮬레이트하는 방법 (즉 코드로 지정 이벤트를 트리거)##

1. event 오브젝트를 작성

2. event 오브젝트의 각 속성을 초기화

3. 이벤트를 트리거

주의: [IE8-] 의 구현은 DOM 규범과 다릅니다. DOM3 레벨만이 키보드 이벤트를 완벽하게 시뮬레이트할 수 있습니다

##10.상식 및 성능 최적화 전략##

1. 다른 이벤트를 인터셉트할 필요가 있는 경우에만, 이벤트 핸들러를 캡처 단계에 추가. [IE8-] 는 이벤트 캡처를 서포트하지 않기 때문

2. 동적으로 작성된 img 요소에 대해, src 속성을 설정한 시점에서 관련 내용의 다운로드가 개시. 새로운 요소가 DOM 트리에 삽입되고 나서 개시되는 것은 아님

3. 동적으로 작성된 script 요소에 대해, DOM 트리에 삽입되고 나서 다운로드가 개시

4. 동적으로 작성된 link 요소 (외부 스타일 읽기용) 에 대해, head 부분에 삽입하고 나서야 브라우저 표현이 일치하는 것을 보증. moreover 외부 스타일은 디폴트로비동기 로드

5. in 연산자로 이벤트 서포트를 검출. 예를 들어:

   if('onload' in elem){
     //do sth
   }
   

6. hover, mouseover, mouseout, mouseenter, mouseleave 의 차이는?

   • hover 는 CSS 의사 클래스. 마우스가 목표 요소에 들어, 그 중에 있을 때 트리거.
   • mouseover 는 마우스 이벤트. 마우스가 목표 요소에 들어갔을 때 트리거. 브라우저의 광범위한 서포트를 얻고 있음. enter 에 상당하지만, nouseenter 는 완전 서포트를 얻고 있지 않음.
   • mouseout 은 mouseover 와 역. leave 는 enter 와 역. 후자는 완전 서포트를 얻고 있지 않음.
   • 本机 테스트: FF 와 IE 는 전 서포트. Chrome 은 enter/leave 를 서포트하지 않음.

7. 이벤트 위임은가장 중요한최적화 전략. 물론, 위임도 완벽하지 않으며, 위임은 로직의粘连을 초래. 예를 들어 극단적인 경우, document 오브젝트에 1 개의 이벤트 핸들러를 추가하는 것만으로 족지만, 그것은 매우 큰 함수가 됨。。。따라서, 적절한 장소에서 가능한 한 위임을 사용해야 함

8. 적시에 기한切れ의 시간 핸들러를 삭제하면 메모리 점유를 삭감. 이는 공간면의 최적화 전략