Javascript 에서 이벤트 의뢰 (delegate) 가 어떻게 실행 되 는 지

1. 이벤트 의뢰 란 무엇 인가 (Event Delegation)
통속 적 인 이 해 는 노드 에 사건 을 등록 할 때 코드 를 최적화 하기 위해 모든 하위 노드 (예 를 들 어

노드 에 똑 같은 사건 을 추가 하지 않 아 도 된다 는 것 이다. 사건 의 거품 체 제 를 통 해 이런 사건 을 모두 그들의 부모 노드 (ul) 에 의뢰 하여 포획 처 리 를 하면 간략화 코드 에 이 를 수 있다.순환 인용 으로 인 한 메모리 누 출 문제 도 없 앴 다.

예제 코드:


  Item 1
  Item 2
  Item 3
  Item 4
  Item 5
  Item 6

//     ul      
document.getElementById("list").addEventListener("click",function(e) {
  // e.target          &&              
  if(e.target && e.target.nodeName.toLowerCase == "li") {
    //           
    e.target.style.backgroundColor = red;
  }
});

이벤트 개체
정의 와 용법
target 이벤트 속성 은 이벤트 의 대상 노드 (이 사건 을 촉발 하 는 노드) 를 되 돌려 줍 니 다. 예 를 들 어 이벤트 의 요소, 문서 또는 창 을 생 성 합 니 다.
대상 이벤트 속성
2. 이벤트 귀속
이벤트 귀속 진행 3 단계
이벤트 캡 처, 이벤트 목표, 이벤트 거품 3 단계 (IE 저 버 전 은 이벤트 거품 지원 하지 않 음)
IE 이벤트 귀속:
element.attach('onclick',function(){});
W3C 이벤트 귀속:
element.addEventListener('click',function(e){});
둘 의 관계:
1. 두 가 지 는 dom 노드 에서 여러 사건 을 동시에 연결 할 수 있 습 니 다. (전통 적 인 한 요소 가 여러 사건 을 연결 하면 이전의 사건 을 덮어 씁 니 다)
2. W3C 에서 this 는 현재 요소 대상 을 연결 하 는 것 을 가리킨다.
둘 의 차이:
1. IE 에서 this 는 window 를 나타 내 고 이벤트 도 window 대상, 즉 window. event, W3C 에 연결 되 어 있 으 며 this 는 현재 대상 을 가리킨다.
2. IE 에 서 는 사건 의 거품 단계 만 포착 하고 W3C 에 서 는 사건 의 포획 단계 와 거품 단 계 를 처리 합 니 다.
3. IE 에 등 록 된 이 벤트 는 "on + 이벤트 이름" 입 니 다. ",W3C 에 등 록 된 이 벤트 는 이벤트 이름 을 직접 사용 합 니 다.
사건 의 전 파 를 막 는 두 가지 방식:
event.stopPropagation()
event.cancelBubble = true;
상술 한 방법 은 사건 의 전 파 를 멈 추고 다른 Document 노드 로 분배 되 는 것 을 막 을 것 이다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

js div 드래그 호 환 i / fireforx js 마우스 위치 깊이 분석

이벤트 속성 은 이벤트 가 실 행 될 때 브 라 우 저 페이지 (클 라 이언 트) 에 대한 수직 좌 표를 되 돌려 줍 니 다. 이 두 속성 은 이벤트 가 실 행 될 때 마우스 포인터 가 브 라 우 저 페이지 (클 라...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Javascript 에서 이벤트 의뢰 (delegate) 가 어떻게 실행 되 는 지

좋은 웹페이지 즐겨찾기