JavaScript의 이벤트 흐름 및 이벤트 핸들러에 대한 자세한 설명(그래픽 튜토리얼)

이벤트 흐름은 페이지에서 이벤트가 수신되는 순서를 말하며, 이벤트 핸들러는 이벤트에 대한 응답을 처리합니다. 다음으로 이벤트 흐름과 JavaScript의 이벤트 핸들러에 대해 자세히 설명합니다.

이벤트 흐름: 두 가지 유형이 있습니다. , IE는 이벤트 버블링 스트림입니다. 이벤트는 처음에 가장 구체적인 요소에서 수신되어 덜 구체적인 노드(요소 -> 문서)로 위쪽으로 전파됩니다. 그 반대는 Netscape의 이벤트 캡처 스트림입니다.

DOM2 레벨 이벤트는 이벤트 흐름에 이벤트 캡처 단계, 대상 단계, 이벤트 버블링 단계의 세 단계가 포함된다고 규정합니다.

대부분의 이벤트 핸들러는 이벤트 흐름의 버블링 단계에 추가됩니다. EventUtil의 예:

var EventUtil = {
  addHandler: function(element, type, handler){
    if(element.addEventListener){
      element.addEventListener(type, handler, false);
    }else if(element.attachEvent){
      element.attachEvent('on' + type, handler); // IE8
    }else{
      element['on' + type] = handler;
    }
  },
  removeHandler: function(){...}
}

아래에서 자세히 살펴보겠습니다.

DOM 레벨 0 이벤트 핸들러 Javascript를 통해 이벤트 핸들러를 지정하는 전통적인 방법은 이벤트 핸들러 속성에 함수를 할당하는 것입니다.
각 요소에는 자체 이벤트 핸들러 속성이 있으며, 일반적으로 onclick과 같이 모두 소문자입니다. 이 속성의 값을 함수로 설정하면 이벤트 핸들러를 지정할 수 있습니다.

var btn = document.getElementById('myBtn');
// 添加事件处理程序
btn.onclick = function () {
  alert( this );//为DOM元素btn
};
// 移除事件处理程序
btn.onclick = null;

장점: 1. 단순함 2. 크로스 브라우저 이점
단점: 코드가 실행되기 전에 이벤트 핸들러가 지정되지 않으므로 이러한 코드는 페이지의 버튼 뒤에 위치하며 그렇지 않을 가능성이 있습니다. 일정 시간 동안 클릭하면 사용자 경험이 저하됩니다.

DOM2 수준 이벤트 핸들러는 이벤트 핸들러를 지정하고 제거하는 작업을 처리하는 두 가지 메서드인 addEventListener() 및 RemoveEventListener()를 정의합니다. 세 가지 매개변수, 1. 처리할 이벤트의 이름. 2. 이벤트 핸들러로서의 함수 3. 부울 값. 마지막 부울 값은 true(캡처 단계 중에 이벤트 핸들러가 호출됨을 의미)이고, false(이벤트 핸들러가 버블링 단계 중에 호출됨을 의미함)입니다.

// 添加多个事件处理程序
var btn = document.getElementById('myBtn');
btn.addEventListener('click',function (){
  alert( this );// 为DOM元素btn
},false );
btn.addEventListener('click',function () {
  alert('Hello World');
},false);

// 移除事件处理程序
btn.removeEventListener('click',function () {
  // 匿名函数无法被移除,移除失败
},false);
  // 改写
  var handler = function () {
  alert(this.id);
  };
  btn.addEventListener('click',handler,false);
  // 再次移除事件处理程序
  btn.removeEventListener('click',handler,false);// 移除成功

이 두 이벤트 핸들러는 추가된 순서대로 실행됩니다. 대부분의 경우 다양한 버전의 브라우저와의 호환성을 최대화하기 위해 이벤트 핸들러는 이벤트 흐름의 버블링 단계에 추가됩니다.

장점: 하나의 요소에 여러 이벤트 핸들러를 추가할 수 있습니다.
단점: IE8 이하 브라우저는 DOM2 수준 이벤트 핸들러를 지원하지 않습니다. (IE8 포함)

IE 이벤트 핸들러는 위와 유사한 두 가지 메서드인 attachmentEvent(), detachEvent()를 정의합니다. 두 메서드 모두 이벤트 핸들러 이름과 이벤트 핸들러 함수라는 동일한 두 매개변수를 받습니다. IE8 이하 브라우저에서는 이벤트 버블링만 지원하므로 detachEvent()를 통해 추가된 이벤트 핸들러가 버블링 단계에 추가됩니다.

var btn = document.getElementById('myBtn');
btn.attachEvent('onclick', function(){
  alert( this );// window
});
btn.attachEvent('onclick', funciton(){
  alert("HELLO, WORLD");
});

버튼을 클릭하면 이 두 이벤트 핸들러의 실행 순서는 위와 정확히 반대입니다. 추가된 순서대로 이벤트 핸들러를 트리거하는 대신 그 반대입니다.

장점: 하나의 요소에 여러 이벤트 핸들러를 추가할 수 있습니다.
단점: IE만 지원합니다.

크로스 브라우저 이벤트 핸들러

eg:

var EventUtil = {
  addHandler : function ( ele, type, handler ) {
    if ( ele.addEventListener ) {
      ele.addEventListener( type, handler, false );
    } else if ( ele.attachEvent ) {
      ele.attachEvent( 'on' + type, handler );
    } else {
      ele['on' + type] = handler
    }
  },
  removeHandler: function ( ele, type, handler ) {
    if ( ele.removeEventListener ) {
      ele.removeEventListener( type, handler, false );
    } else if ( ele.detachEvent ) {
      ele.detachEvent( 'on' + type, handler );
    } else {
      ele[ 'on' + type ] = null;
    }
  }
}

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

기본 JavaScript 팁(그림 및 텍스트 자습서, 자세한 답변)

javascriptEL 표현식 목록 컬렉션의 값 탐색

JavaScript의 자세한 분석 운영 원칙 Answer

위 내용은 JavaScript의 이벤트 흐름 및 이벤트 핸들러에 대한 자세한 설명(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!