일반적인 이벤트 결합 방법 : 전통적인 결합, W3C 결합 방법 및 IE 결합 방법 . 그러나 실제 개발에서 우리에게 중요한 것은 일반적인 브라우저 교차 결합 방법을 요구하는 것입니다. 인터넷에서 검색하면 많은 방법을 찾을 수 있습니다. 더 잘 알려진 방법은 다음과 같습니다.
학기를 시작하기 전에 좋은 addevent () 방법이 어떤 요구 사항을 충족 해야하는지 논의해야합니다.
에이. 동일한 요소를지지하는 동일한 이벤트 핸들은 다중 청취 함수를 바인딩 할 수 있습니다.
비. 동일한 요소의 동일한 이벤트 핸들에서 동일한 함수가 여러 번 등록되는 경우 첫 번째 등록 후 모든 등록이 무시됩니다.
기음. 기능 본문에서 이것은 이벤트를 처리하는 노드 (예 : 현재 이벤트 핸들러를 실행중인 노드와 같은)를 가리켜 야합니다.
디. 청취 함수의 실행 순서는 바운드 순서로 실행되어야합니다.
이자형. 이벤트 = 이벤트 ||를 사용하지 마십시오 Window.event; 이벤트 객체를 정규화하는 기능 본문에서;
1. John Resig가 작성한 addevent () 함수
함수 addevent (obj, type, fn) {if (obj.attachevent) {obj [ 'e'+type+fn] = fn; obj [type+fn] = function () {obj [ 'e'+type+fn] (window.event);} obj.attachevent ( 'on'+type, obj [type+fn]); } else obj.addeventListener (유형, fn, false); } 함수 removeEvent (obj, type, fn) {if (obj.detachevent) {obj.detachevent ( 'on'+type, obj [type+fn]); obj [type+fn] = null; } else obj.removeEventListener (유형, fn, false); }이 기능이 매우 간단하고 이해하기 쉽다는 것은 정말 놀랍습니다. 그런 다음 여전히 위의 5 가지 요구 사항을 살펴 봐야합니다.
첫 번째 요점에 만족;
나는 세 번째와 다섯 번째 포인트에 만족했을 것입니다.
두 번째 시점에서는 addeventListener ()가 중복 등록을 무시하고 첨부 이벤트 ()는 그렇지 않기 때문에 만족하지 않습니다.
그러나 DOM 표준이 객체를 호출하기위한 시간 처리 함수의 순서를 결정하지 않기 때문에 네 번째 요점은 충족되지 않으므로 등록 순서대로 호출되는 것으로 당연한 것으로 여겨지지 않아야합니다.
그러나이 기능은 여전히 매우 좋은 기능입니다.
2. Dean Edward가 작성한 addevent () 함수
함수 addevent (요소, 유형, 핸들러) {if (! handler. $$ guid) 핸들러. $$ guid = addevent.guid ++; if (! element.events) 요소 = {}; var 핸들러 = Element.Events [type]; if (! handlers) {handlers = element.events [type] = {}; if (요소 [ "on" + type]) {핸들러 [0] = 요소 [ "on" + type]; }} 핸들러 [핸들러. $$ guid] = 핸들러; 요소 [ "on" + type] = handleEvent;} addevent.guid = 1; 함수 removeEvent (element, type, handler) {if (element.events && element.events [type]) {delete element.events [type] [handler. $$ guid]; }} 함수 handleEvent (이벤트) {var returnValue = true; 이벤트 = 이벤트 || fixevent (shooel.event); var 핸들러 = this.events [event.type]; for (handlers in handlers) {this. $$ handleEvent = 핸들러 [i]; if (this. $$ handleEvent (event) === false) {returnValue = false; }} return returnValue;}; 함수 fixEvent (event) {event.preventDefault = fixEvent.preventDefault; event.stoppropagation = fixevent.stoppropagation; return event;}; fixEvent.preventDefault = function () {this.returnValue = false;}; fixEvent.stopPropagation = function () {this.cancelBubble = true;};이 기능은 기존 바인딩 방법을 사용하므로 메모리 누출을 유발하지 않고 모든 브라우저에서 작동합니다.
그러나 원래 제안 된 5 점의 경우이 기능은 처음 4 점 만 충족시킵니다. javaScript에서 for/in 문의 실행 순서가 할당 순서로 지정되지 않기 때문에 마지막 요점만이 만족하지 않지만 대부분의 시간은 예상 순서로 실행되지만이 명령문의 순서는 JavaScript 버전이나 구현에서 다를 수 있습니다.
3. Dean Edward의 addevent () 기능의 개선
Array.prototype.indexof = function (obj) {var result = -1, length = this.length, i = 길이 -1; for (; i> = 0; i-) {if (this [i] == obj) {result = i; 부서지다; }} return result;} array.prototype.contains = function (obj) {return (return (this.indexof (obj)> = 0)} array.prototyp.append = function (obj, nodup) {if (! }} array.prototype.remove = function (obj) {var index = this.indexof (obj); if (! index) 반환; replice this.splice (index, 1);}; function addevent (element, type, fun) {if (! element.events) 요소 = {}; var 핸들러 = Element.Events [type]; if (! handlers) {handlers = element.events [type] = []; if (요소 [ 'on' + type]) {핸들러 [0] = 요소 [ 'on' + type]; }} handlers.append (fun, true) 요소 [ 'on' + type] = handleEvent;} 함수 removeEvent (요소, 유형, fun) {if (element.events && element.events [type]) {element.events [type] .remove (fun); }} 함수 handleEvent (이벤트) {var returnValue = true, i = 0; 이벤트 = 이벤트 || fixevent (shooel.event); var 핸들러 = this.events [event.type], length = handlers.length; for (; i <length; i ++) {if (handlers [i] .call (this, event) === false) {returnValue = false; }} return returnValue;} 함수 fixEvent (event) {event.preventDefault = fixEvent.preventDefault; event.stoppropagation = fixevent.stoppropagation; return event;} fixEvent.preventDefault = function () {this.returnValue = false;}; fixEvent.stopPropagation = function () {this.cancelBubble = true;};이 기능은 5 가지 초기 요구 사항을 완전히 충족하는 Dean Edward의 addevent () 함수에 대한 개선입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 읽어 주셔서 감사합니다.