자 바스 크 립 트 의 거품 과 포획 을 생생 하고 상세 하 게 설명 하 며 가방 회 를 이해 합 니 다.

앞에서 말 했 듯 이 jquery 에 정통 하지만 원형 자바 script 에 대해 잘 모 릅 니 다.최근 자바 script 을 배 우 는 데 어려움 을 겪 었 습 니 다.예 를 들 어 거품 과 캡 처 등 여러 번 언급 되 었 지만 어디 에 응용 되 었 는 지 모 르 겠 습 니 다.좋 은 글 을 찾 아 의혹 을 풀 고 여기 서 여러분 께 나 누 어 드 리 겠 습 니 다.
quirksmode 의 일련의 문장 은 모두 괜 찮 고 통속 적 이 며 이해 하기 쉽다.이 문장 은 단지 일련의 한 편 일 뿐 이 며,기회 가 있 으 면 자 바스 크 립 트 라 는 시 리 즈 를 모두 에 게 번역 할 수 있다.
원문 주 소 는 여기http://www.quirksmode.org/js/events_order.html이 고 문장 에'(?)'라 고 표시 되 어 있 습 니 다.이 문장 에 대해 잘 이해 하지 못 하고 틀 릴 수 있 음 을 나타 낸다.본 격 시작:
사건 발생 순서
이 문제 의 기원 은 매우 간단 하 다.만약 네가 한 원소 에 또 다른 원 소 를 끼 워 넣 었 다 고 가정한다 면

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

:그리고 둘 다 onClick 이벤트 처리 함수(event handler)가 있 습 니 다.사용자 가 요소 2 를 누 르 면 요소 1 과 요소 2 의 클릭 이벤트 가 실 행 됩 니 다.그런데 어떤 사건 이 먼저 촉발 되 었 습 니까?어떤 이벤트 처리 함수 가 먼저 실 행 됩 니까?사건 의 발생 순 서 는 어떻게 되 는 것 일 까?
 
두 가지 모형
예상대로'돌 이 킬 수 없 는'(브 라 우 저 대전)의 날 에 넷 스 케 이 프 와 마이크로소프트 는 두 가지 다른 처리 방법 이 있 었 다.

넷 스 케 이 프 가 원소 1 을 주장 하 는 사건 이 먼저 발생 하 는데 이런 사건 의 발생 순 서 는 포획 형

이 라 고 불 린 다.

마이크로소프트 는 요소 2 를 유지 하 는 것 이 우선권 을 가진다.이런 사건 의 순 서 는 거품 형

이 라 고 불 린 다.
이 두 사건 의 순 서 는 완전히 상반 된다.Explorer 브 라 우 저 는 거품 이벤트 만 지원 합 니 다.Mozilla,Opera 7,Konqueror 둘 다 지원 합 니 다.더 오래된 opera 와 icab 는 둘 다 지원 하지 않 습 니 다.
 
포획 형 이벤트
포획 형 이 벤트 를 사용 할 때

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

:요소 1 의 이벤트 처리 함수 가 먼저 트리거 되 고 요소 2 의 이벤트 처리 함수 가 마지막 에 트리거 됩 니 다.
거품 형 사건
거품 형 이 벤트 를 사용 할 때

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

:원소 2 의 처리 함수 가 먼저 촉발 되 고 원소 1 이 그 다음 이다
W3C 모델
W3c 는 현명 하 게 이 싸움 에서 선택 한 방안 을 선택 했다.w3c 이벤트 모델에서 발생 하 는 모든 사건 은 포획 단계 에 들 어가 목표 요소 에 도달 할 때 까지 거품 단계 에 들어간다.

                 | |  / \
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    \ /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

웹 개발 자 를 위해 포획 단계 인지 거품 단계 인지 귀속 이벤트 처리 함 수 를 선택 할 수 있 습 니 다.이것 은 addEventListener()방법 을 통 해 이 루어 진 것 입 니 다.만약 에 이 함수 의 마지막 인자 가 true 라면 포획 단계 에서 귀속 함수,반대로 false,거품 단계 에서 귀속 함 수 를 선택 할 수 있 습 니 다.
 하면,만약,만약...

element1.addEventListener('click',doSomething2,true)

element2.addEventListener('click',doSomething,false)

사용자 가 요소 2 를 누 르 면 다음 에 발생 합 니 다:
(사건 은 여기 서 관광객 처럼 밖에서 안 으로 유람 하고 촉발 되 는 주요 요소 에 점점 가 까 워 진 다음 에 반대로 떠난다)

이 벤트 를 누 르 면 먼저 포획 단계 에 들 어가 기 시작 합 니 다(원소 2 에 점점 가 까 워 지 는 방향).원소 2 의 조상 원소 중 포획 단계 에 onclick 처리 함수 가 있 는 지 확인 하기

요소 1 이 하나 있 는 것 을 발견 하여 doSomething 2 가 실 행 됩 니 다

사건 은 목표 자신(요소 2)을 검 사 했 고 포획 단계 에서 더 많은 처리 함 수 를 발견 하지 못 했다.이벤트 가 거품 단계 에 들 어가 기 시 작 했 습 니 다.doSomething()을 당연히 실행 하고 싶 습 니 다.이 는 요소 2 거품 단계 에 연 결 된 함수 입 니 다.

사건 은 원소 2 에서 멀리 떨 어 진 방향 으로 조상 원소 가 거품 단계 에서 처리 함 수 를 연결 하 였 는 지 확인 합 니 다.이런 상황 이 없 었 기 때문에 아무 일 도 일어나 지 않 았 다

반면 상황 은:

element1.addEventListener('click',doSomething2,false)

element2.addEventListener('click',doSomething,false)

현재 사용자 가 요소 2 를 클릭 하면 발생 합 니 다:

이 벤트 를 클릭 하여 포획 단계 에 들 어 갑 니 다.원소 2 의 조상 원소 중 포획 단계 에 onclick 처리 함수 가 있 는 지 확인 한 결과 아무것도 얻 지 못 했다

사건 은 목표 자신 을 검사 했다.이벤트 가 거품 단계 에 들 어가 고 요소 2 거품 단계 에 연 결 된 함 수 를 실행 합 니 다.doSomething()

사건 은 목 표를 멀리 하기 시 작 했 고 요소 2 의 조상 요소 중 거품 단계 에서 처리 함 수 를 연결 한 것 이 있 는 지 확인 했다

.

하 나 를 발 견 했 고 원소 1 의 doSomething 2()가 실행 되 었 다

호환성 과 전통 모델
w3c dom(문서 대상 모델)을 지원 하 는 브 라 우 저 에서 전통 적 인 이벤트 바 인 딩 방법 은?

element1.onclick = doSomething2;

기본 값 은 거품 단계 에 귀속 되 어 있 는 것 으로 간 주 됩 니 다
 
거품 형 이벤트 사용
거품 형 사건 이나 포획 형 사건 을 의식 적 으로 사용 하 는 개발 자 는 드물다.그들 이 오늘 만 든 홈 페이지 에 서 는 하나의 사건 이 거품 으로 인해 여러 함수 에 의 해 처리 되 게 할 필요 가 없다.그러나 사용자 들 은 마 우 스 를 한 번 만 클릭 한 후에 여러 가지 상황(여러 함수 가 실행 되 고 거품 이 생 겨 서)이 발생 했 기 때문에 의 심 스 러 울 때 가 있다.대부분의 경우 당신 의 처리 함수 가 서로 독립 되 기 를 바 랍 니 다.사용자 가 특정한 요 소 를 클릭 하면 무슨 일이 발생 하 는 지,다른 요 소 를 클릭 하면 무슨 일이 발생 하 는 지,서로 독립 되 고 거품 연쇄 때 문 이 아 닙 니 다.
 
계속 일어나 고 있어 요.
우선 사건 포착 이나 거품 이 계속 발생 하고 있다 는 것 을 알 아야 한다.전체 페이지 문서 에 일반적인 onclick 처리 함 수 를 정의 하면

document.onclick = doSomething;

if (document.captureEvents) document.captureEvents(Event.CLICK);

//             ，   ，        

페이지 에서 모든 요소 의 클릭 이 벤트 를 누 르 면 최종 적 으로 페이지 의 최고 문서 층 으로 거품 이 발생 합 니 다.따라서 일반적인 처리 함 수 를 촉발 합 니 다.이전 처리 함수 가 거품 을 중지 하 라 고 명확 하 게 지적 하지 않 아야 거품 이 전체 문서 차원 으로 전파 되 지 않 습 니 다.
 
용법(이 소절 은 번역 이 좋 지 않 습 니 다.실전 이 없 기 때문에 저도 잘 이해 하지 못 합 니 다.댓 글 에 보충 할 수 있 습 니 다.업데이트 하 겠 습 니 다)
모든 이벤트 전 파 는 페이지 문서(이 최고 층)에서 종료 되 기 때문에 기본 이벤트 처리 함수 가 가능 합 니 다.이러한 페이지 가 있다 고 가정 합 니 다.

------------------------------------
| document                         |
|   ---------------  ------------  |
|   | element1    |  | element2 |  |
|   ---------------  ------------  |
|                                  |
------------------------------------

element1.onclick = doSomething;
element2.onclick = doSomething;
document.onclick = defaultFunction;

 
현재 사용자 가 요소 1 이나 요소 2 를 누 르 면 doSomething()이 실 행 됩 니 다.만약 당신 이 원한 다 면,만약 당신 이 사건 을 default Function()을 실행 할 때 까지 거품 을 일 으 키 고 싶 지 않다 면,당신 은 여기에서 사건 의 거품 이 위로 퍼 지 는 것 을 막 을 수 있 습 니 다.그러나 사용자 가 페이지 의 다른 부 위 를 클릭 하면 defaultFunction()이 실 행 됩 니 다.이런 효 과 는 때때로 쓸 수 있 을 지도 모른다.
 
페이지 설정­——처리 함 수 를 범위 가 넓 은 트리거 면적 으로'드래그 효과'스 크 립 트 에 필요 합 니 다.일반적으로 특정한 요소 층 에서 mousedown 사건 이 발생 한 것 은 이 요 소 를 선택 하고 mousemove 사건 에 응답 할 수 있 도록 하 는 것 을 의미한다.mousedown 은 브 라 우 저 bug 를 피하 기 위해 이 요소 층 에 연결 되 어 있 지만 다른 두 가지 이벤트 함수 의 범 위 는 전체 페이지(?)여야 합 니 다.
 
브 라 우 저 학 의 첫 번 째 법칙(First Law of Browserology)을 기억 하 세 요.모든 것 이 가능 합 니 다(anything can happen).그리고 최소한 준비 가 되 어 있 을 때 입 니 다.그래서 발생 할 수 있 는 것 은 사용자 가 끌 어 당 길 때 페이지 에서 마 우 스 를 대폭 이동 하지만 스 크 립 트 는 큰 폭 에서 반응 하지 못 해 마우스 도 요소 층 에 머 물 지 않 는 다 는 것 이다.

onmouseover 처리 함수 가 요소 층 에 연결 되 어 있 으 면 이 요소 층 은 마우스 의 이동 에 더 이상 반응 하지 않 습 니 다.이것 은 사용자 로 하여 금 이상 하 게 생각 하 게 할 것 입 니 다

만약 에 onmouseup 처리 함수 가 요소 층 에 연결 되면 사건 도 촉발 되 지 않 습 니 다.그 결과 사용자 가 이 요소 층 을 내 려 놓 으 려 고 하면 요소 층 은 마우스 이동 에 계속 반응 합 니 다.이것 은(사용자)더 많은 현혹(?)

그래서 이 예 에서 사건 의 거품 은 매우 유용 합 니 다.왜냐하면 당신 의 처리 함 수 를 페이지 층 에 두 면 그들 이 계속 실 행 될 수 있 기 때 문 입 니 다.
 
꺼 버 렸 어.
그러나 일반적인 상황 에서 함수 간 에 상대방 을 방해 하지 않도록 모든 거품 과 포획 을 끄 고 싶 을 것 이다.그 밖 에 문서 구조 가 상당히 복잡 하 다 면 시스템 자원 을 절약 하기 위해 거품 을 닫 을 것 입 니 다.이 때 브 라 우 저 는 대상 요소 의 모든 조상 을 검사 하여 처리 함수 가 있 는 지 확인 해 야 합 니 다.하나 도 찾 지 못 하 더 라 도 방금 검색 하 는 데 도 많은 시간 이 걸 렸 다.
 
마이크로소프트 모델 에서 이벤트 의 cancelBubble 속성 을 true 로 설정 해 야 합 니 다.

window.event.cancelBubble = true

w3c 모델 에서 이벤트 의 stopPropagation()방법 을 호출 해 야 합 니 다.

e.stopPropagation()

이것 은 모든 거품 이 밖으로 전파 되 는 것 을 막 을 것 이다.크로스 브 라 우 저 솔 루 션 으로서 이렇게 해 야 합 니 다.

function doSomething(e)

{
　　　　  if (!e) var e = window.event;

         e.cancelBubble = true;

         if (e.stopPropagation) e.stopPropagation();

}

cancelBubble 속성 을 지원 하 는 브 라 우 저 에 cancelBubble 을 설정 하면 우아 함 을 해치 지 않 습 니 다.브 라 우 저 는 어깨 를 으쓱 하고 이 속성 을 만 듭 니 다.물론 거품 을 진정 으로 없 앨 수 는 없 지만,적어도 이 명령 이 안전 하고 정확 하 다 는 것 은 보장 할 수 있다.
 
currentTarget
앞에서 보 았 듯 이 하나의 사건 은 target 이나 srcElement 속성 으로 사건 이 어떤 목표 요소 에서 발생 했 는 지 나타 낸다(즉,사용자 가 최초 로 클릭 한 요소).우리 의 예 에서 요소 2 는 우리 가 그것 을 눌 렀 기 때문이다.
매우 중요 한 것 은 포획 이나 거품 단계 의 목표 요 소 는 변 하지 않 고 원소 2 와 관련 이 있다 는 것 을 알 아야 한다.
하지만 우리 가 다음 함 수 를 연결 했다 고 가정 하면

element1.onclick = doSomething;

element2.onclick = doSomething;

사용자 가 요소 2 를 누 르 면 doSomething()은 두 번 실 행 됩 니 다.그런데 어떤 html 요소 가 이 사건 에 응답 하고 있 는 지 어떻게 압 니까?target/srcElement 도 단 서 를 제시 하지 않 았 지만 사람들 은 항상 요소 2 를 선 호한 다.왜냐하면 이것 은 사건 을 일 으 키 는 원인 이기 때문이다.(사용자 가 클릭 한 것 은 그것 이기 때문이다.)
이 문 제 를 해결 하기 위해 w3c 는 currentTarget 이라는 속성 을 추 가 했 습 니 다.이 속성 은 사건 을 처리 하고 있 는 요 소 를 가리 키 고 있 습 니 다.이것 은 바로 우리 가 필요 로 하 는 것 입 니 다.불행 하 게 도 마이크로소프트 모델 에는 비슷 한 속성 이 없다.
너 도'this'키 워드 를 사용 할 수 있다.위의 예 에서 이 벤트 를 처리 하고 있 는 html 요소 에 해당 합 니 다.마치 currentTarget 과 같 습 니 다.
 
질문
그러나 마이크로소프트 이벤트 바 인 딩 모델 을 사용 할 때 this 키 워드 는 HTML 요소 에 해당 하지 않 습 니 다.currentTarget 속성 과 유사 한 마이크로소프트 모델(?)이 부족 한 것 을 연상 합 니 다.위의 코드 로 조작 하면 당신 이 이렇게 하 는 것 은:

element1.attachEvent('onclick',doSomething)

element2.attachEvent('onclick',doSomething)

어떤 HTML 요소 가 사건 을 처리 하고 있 는 지 정확히 알 수 없습니다.이것 은 마이크로소프트 이벤트 바 인 딩 모델 의 가장 심각 한 문제 입 니 다.저 에 게 이것 도 제 가 사용 하지 않 는 이유 입 니 다.Windows 에서 만 제공 되 는 IE 응용 프로그램 을 개발 하 더 라 도.
 
currentTarget 과 유사 한 속성 을 빨리 늘 리 거나 기준 을 따 르 고 싶 습 니 다.웹 개발 자 들 은 이 정보 가 필요 합 니 다.
 후기:
자바 script 을 실전 해 본 적 이 없 기 때문에 이 글 은 제 가 잘 이해 하지 못 하고 억지로 번역 할 수 밖 에 없습니다.예 를 들 어 끌 어 당 기 는 효과 에 대해 이야기 하 는 부분 입 니 다.만약 에 여러분 이 보충 과 의문 이 있 으 면 저 에 게 메 시 지 를 남 겨 주 셔 서 감사합니다.