JS 이벤트 바인딩_javascript 기술에 대한 심층적인 이해

1. 전통적 이벤트 모델

전통적인 이벤트 모델에는 한계가 있습니다.

인라인 모델은 HTML 태그 속성의 형태로 사용되며 HTML과 혼합되어 사용됩니다. 이 방법은 의심할 여지없이 수정 및 확장 문제를 일으키며 더 이상 사용되지 않습니다.

스크립트 모델은 js 파일에 이벤트 처리 함수를 작성하고, 페이지에서 요소를 가져온 다음, 해당 이벤트 함수를 바인딩하여 실행을 트리거합니다. 하지만 단점도 있습니다:

1. 이벤트는 여러 이벤트 수신 기능에 바인딩되며 후자가 전자를 재정의합니다.

2. 반복 바인딩을 제한해야 하는 상황

3. 표준화된 이벤트 객체

2. 최신 이벤트 바인딩

DOM2 수준 이벤트는 이벤트 추가 및 삭제를 위한 두 가지 메서드(addEventListener() 및 RemoveEventListener())를 정의합니다. 각각 이벤트 이름, 함수, 버블링 또는 부울 값 캡처(true는 캡처를 의미하고 false는 버블 위험을 의미)라는 세 가지 매개 변수를 받습니다.

따라서 IE는 두 가지 유사한 메서드인 attachmentEvent()와 detachEvent()를 제공하지만 IE의 두 메서드에는 또 다른 문제가 있습니다. 즉, this 개체를 전달할 수 없습니다(IE에서는 이 개체가 창을 가리킴). 객체 가장:

function addEvent(obj,type,fn){ 
if(typeof obj.addEventListener != 'undefined'){ 
obj.addEventListener(type,fn,false); 
}else if(obj.attachEvent != 'undefined'){ 
obj.attachEvent('on' + type,function(){ 
fn.call(obj,window.event); 
}); 
} 
};

그러나 익명 함수는 추가 시 실행되기 때문에 추가 후 삭제할 수 없으며, 또한 IE에서 제공하는 방법 역시 바인딩 이벤트를 순차적으로 실행할 수 없어 메모리 누수가 발생하는 문제가 발생합니다.

이런 일련의 문제를 해결하려면 방법을 추가로 캡슐화해야 합니다. 다른 브라우저의 경우 DOM2 수준 표준을 사용하고 IE의 경우 기존 모드를 기반으로 추가 및 삭제를 사용합니다.

1. 추가는 JS 해시 테이블을 사용하여 객체 이벤트를 저장하고, 추가된 호출 순서에 따라 먼저 동일한 처리 기능이 있는지 확인하고, 이벤트를 순차적으로 바인딩합니다. .해시테이블에 함수를 추가하여 순차적으로 실행할 수 없고 반복적으로 추가되는 문제를 해결했습니다

2. 삭제시 순회기능 일치 여부를 판단하여 존재하는 경우 삭제합니다

요약:

이전에는 JS 이벤트 바인딩에 대한 깊은 이해가 없었습니다. 심지어 전통적인 이벤트 바인딩 모델에 머물렀고, 프로그램 구현에 대한 이해도가 여전히 너무 얕았습니다. 이번에 캡슐화에 대해 배우면서 많은 것을 배웠습니다. 라이브러리.JS의 객체지향 애플리케이션. JQuery와 유사한 js 라이브러리는 데이터 바인딩 메커니즘의 좋은 캡슐화 효과를 달성했지만 그 이유만 알고 있으면 여전히 특정 구현을 직접 분석하는 것처럼 느껴집니다. 갑자기 깨달음을 얻게 될 것이고, 호환 가능하고 다재다능한 프로그램을 만들기 위해서는 많은 내용을 고려하고 많은 문제를 해결해야 한다는 것을 깨닫게 될 것이며, 이러한 문제에 대해 점차 명확해지고 있다는 것을 깨닫게 될 것입니다.