1. 전통적인 이벤트 모델
전통적인 이벤트 모델에는 제한이 있습니다.
인라인 모델은 HTML 태그 속성 형태로 사용되며 HTML과 혼합됩니다. 이 방법은 의심 할 여지없이 수정 및 확장에 문제가 발생하며 거의 사용되지 않습니다.
스크립트 모델은 이벤트 처리 기능을 JS 파일에 작성하고 페이지에서 요소를 얻어 해당 이벤트 기능을 바인딩하여 실행을 트리거합니다. 그러나 단점도 있습니다.
1. 한 이벤트는 여러 이벤트 청취 함수를 바인딩하고 후자는 전자를 무시합니다.
2. 반복 된 결합은 제한되어야한다
3. 이벤트 객체를 표준화하십시오
2. 현대 이벤트 바인딩
DOM2- 레벨 이벤트 이벤트 추가 및 삭제를위한 두 가지 방법을 정의합니다 : addeventListener () 및 removeEventListener (). 이벤트 이름, 기능, 버블 링 또는 캡처 된 부울 값의 세 가지 매개 변수를받습니다 (True Leans Capture, False는 버블 링).
이에 따라 IE는 첨부 첨부 ()와 DetacheVent ()의 두 가지 유사한 방법을 제공하지만 IE의 두 가지 방법은 다른 문제가 있습니다.이 객체를 전달하는 것은 불가능합니다 (즉, IE 지점에서 창으로) 호출 방법을 사용하여 객체를 가장합니다.
function addevent (obj, type, fn) {if (typeof obj.addeventListener! = 'undefined') {obj.adeventListener (type, fn, false); } else if (obj.attachevent! = 'undefined') {obj.attachevent ( 'on' + type, function () {fn.call (obj, window.event);}); }};그러나 추가 할 때 익명 함수가 실행되므로 추가 후 삭제할 수 없습니다. 또한, IE가 제공하는 IE 방법은 순서 및 메모리 누출에서 바인딩 이벤트의 실행에 실패한 것과 같은 문제가 있습니다.
이 일련의 문제를 해결하려면이 방법을 추가로 캡슐화하고 다른 브라우저에 DOM2 레벨 표준을 사용해야합니다. IE의 경우 기존 모드를 기반으로 추가 및 삭제가 채택됩니다. 아이디어는 :
1. 추가는 JS의 해시 테이블을 사용하여 객체 이벤트를 저장하고 각 객체 이벤트에 ID 값을 할당하며 먼저 동일한 처리 기능이 추가 순서대로 존재하는지 여부를 결정하는 것입니다. 존재하지 않으면 이벤트 바인딩 함수를 해시 테이블에 차례로 추가하십시오. 이것은 순서대로 실행할 수 없다는 문제를 해결하고 반복적 인 추가를 해결합니다.
2. 삭제할 때, 그것은 트래버스 함수의 일치를 판단하는 데 사용됩니다. 존재하면 삭제됩니다.
요약 :
나는 이전에 JS 이벤트 바인딩에 대한 더 깊은 이해를 얻지 못했고, 전통적인 이벤트 바인딩 모델에도 머물 렀으며 여전히 프로그램 구현에 대해 너무 얕게 이해했습니다. 이번에는 캡슐화 라이브러리를 배웠을 때 JS에 대한 많은 객체 지향 응용 프로그램을 배웠습니다. JQuery와 같은 JS 라이브러리는 데이터 바인딩 메커니즘의 좋은 캡슐화 효과를 달성했지만 이유 만 알지 못하지만 그 이유를 알지 못하며 어둠 속에 유지되는 느낌이 있다면 특정 구현을 직접 분석하고 갑자기 깨달음을 느낄 것입니다. 또한 호환 가능하고 다재다능한 프로그램을 잘 수행하려면 많은 콘텐츠를 고려하고 많은 문제를 해결해야하며, 이러한 많은 문제를 점차 정리하고 있습니다.