이벤트 모델에 대한 자세한 설명

이번에는 이벤트 모델에 대한 자세한 설명을 가져왔습니다. 이벤트 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

IEEvent모델(캡처 없음) (<=ie8)

1. attachEvent(event, function)
   detachEvent(event, function)
   첫 번째 매개변수는 on+'event';

2. TargetObjectevent.srcElement;

3. 이것은 창을 가리킵니다.

4. event.cancelBubble = true // 버블링 중지
   event.returnValue = false // 기본 이벤트 차단

표준 DOM 이벤트 모델(캡처, 대상, 버블링) (>ie8)

1. addEventListener(event, function, useCapture)
   removeEventListener(event, function, useCapture)
   useCapture는 true이며 캡처 단계에서 실행됩니다.
   useCapture는 false이고 버블링 단계(기본값)에서 실행되며

2. event.target 및 event.currentTarget
   target은 대상 단계에 있습니다. 이벤트 흐름(이벤트 모니터링을 트리거하는 개체를 가리킴)
   이벤트 스트림의 캡처, 대상 및 버블링 단계에서
   currentTarget(이벤트 모니터링을 추가하는 개체를 가리킴)
   이벤트 스트림이 대상 단계에 있는 경우에만 두 방향은 동일합니다.

   캡처링 및 버블링 단계에서 target은 클릭된 개체를 가리키고 currentTarget은 현재 이벤트 활동의 개체(일반적으로 부모)를 가리킵니다.

3. 이것은 이벤트 수신 개체를 가리킵니다.

4. 
   event.stopPropagation() // 버블링 중지

   event.preventDefault() // 기본 이벤트 중지

5. event.stopImmediatePropagation() 이벤트

   함수 실행을 처리하고 이벤트가 DOM 트리에서 버블링되는 것을 방지합니다. 이 방법은 어떤 매개변수도 허용하지 않습니다.

Custom events

var event = new Event('自定义事件');// Listen for the event.elem.addEventListener('自定义事件', function (e) { ... }, false);// Dispatch the event.elem.dispatchEvent(event);
CustomEvent 接口可以为 event 对象添加更多的数据；detail属性可用于传递自定义数据：var event = new CustomEvent('自定义事件', { 'detail': elem.dataset.time });
下面的代码允许你在事件监听器中访问更多的数据：function eventHandler(e) {
  log('The time is: ' + e.detail);
}

이 기사의 사례를 읽은 후 이 방법을 마스터했다고 생각합니다. 더 흥미로운 내용을 알고 싶다면 PHP 중국어 웹사이트other관련 기사를 팔로우하세요!

추천 도서:

이벤트 루프 사용 방법

JavaScript 이벤트 버블링 및 이벤트 캡처 구현 방법

🎜

위 내용은 이벤트 모델에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!