뒤로 호환되는 DOM 이벤트 바인딩

주요 내용:

addEventListener ：

document.body.addEventListener( 'click',
    function() {
        alert('body clicked');
    },false);

 object ：

document.body.addEventListener('click',
    {
        handleEvent: function() {
            alert('body clicked');
        }
    },
    false);

원문은 쓸데없는 말이 너무 많아서 나는 주요 부분만 번역했다.원문 주소:http://peter.michaux.ca/articles/our-backwards-dom-event-libraries자세한 내용은 직접 확인하십시오.

본문

각 브라우저에서 제공하는 DOM 요소 이벤트 바인딩 인터페이스를 간단히 살펴보십시오.

//IE element.attachEvent：
document.body.attachEvent(
    'onclick',
    function() {
        alert('body clicked');
    });
// element.addEventListener：
document.body.addEventListener(
    'click',
    function() {
        alert('body clicked');
    },
    false);

일반적으로 위의 두 번째 매개 변수는 하나의 함수 핸들에 전달되지만, 대부분의javascript 프로그래머들은 두 번째 매개 변수가 하나의 대상obj[DOM2 인터페이스에 전달될 수 있는지 모른다http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events- EventListener], 이렇게 하면 이벤트가 실행될 때obj의handleEvent 방법을 은밀하게 호출합니다.

document.body.addEventListener(
    'click',
    {
        handleEvent: function() {
            alert('body clicked');
        }
    },
    false);

이렇게 하는 중요한 부분 중 하나는 obj의handle Event가 실행될 때만 접근해야 한다는 것이다.또한 두 번의 이벤트 이벤트 간격에서handle 이벤트가 바뀌면 효과가 달라집니다.이런 장점은remove 이벤트를 사용하지 않고 이벤트를 전환하는 것이다.
다음 예제를 참조하십시오.

document.body.addEventListener('click', obj, false);
// click body will error in some browsers because
//  
obj.handleEvent = function() {alert('alpha');};

//  alpha
obj.handleEvent = function() {alert('beta');};

//  "beta"
document.body.removeEventListener('click', obj, false);
// 

[주의, 이 용법에는 일정한 호환성 문제가 존재한다. 그러나 나는 현재 휴대전화 브라우저만 대상으로 하고 있으니 스스로 테스트해 보세요]

브라우저 간 이벤트 바인딩

이벤트 바인딩의 경우 여러 라이브러리에서 호환 문제를 처리하고 API를 통일합니다. 대부분 유사합니다.

LIB_addEventListener(
    document.body, 
    'click', 
    function() {
        alert('body clicked');
    });

개인 실현의 하나:

// 
    function LIB_addEventListener(el,type,fn){
        el.addEventListener(type,fn,false);
    }
    function ViewObject() {
        this.data = 'alpha';
        LIB_addEventListener(document.body,'click',this.handleClick);
    }
    ViewObject.prototype.handleClick = function() {
        console.log(this.data);
    };
    var test = new ViewObject();// undefined

우리는'alpha'가 튀어나오기를 기대하지만,this는 윈도우를 가리키며,undefined가 튀어나온다.
해결 방법, 어떤 라이브러리는 네 번째 매개 변수를 추가하여 상하문을 작성합니다.

    function LIB_addEventListener(el,type,fn,obj){
        el.addEventListener(type,fn.bind(obj),false);
    }
    function ViewObject() {
        this.data = 'alpha';
        LIB_addEventListener(document.body,'click',this.handleClick,this);
    }
    ViewObject.prototype.handleClick = function() {
        console.log(this.data);
    };
    var test = new ViewObject();

지금 저희가'알파'가 나오잖아요.
이런 방식의 문제:listener는 귀속할 때 이미 고정되어 있기 때문에 문제가 또 생겼다.

    function LIB_addEventListener(el,type,fn,obj){
        el.addEventListener(type,fn.bind(obj),false);
    }
    function ViewObject() {
        this.data = 'alpha';
        LIB_addEventListener(document.body,'click',this.handleClick,this);
    }
    ViewObject.prototype.handleClick = function() {
        console.log(this.data);
    };
    var test = new ViewObject();
    test.handleClick = function(){
        console.log('new fn');// alpha。 new fn
    }

obj 바인딩 형식:

    function LIB_addEventListener(el,type,obj){
        el.addEventListener(type,obj,false);
    }
    function ViewObject() {
        this.data = 'alpha';
        LIB_addEventListener(document.body, 'click', this);
        LIB_addEventListener(document.body, 'mousemove', this);
    }
    ViewObject.prototype.handleEvent = function(e) {
            if('click' == e.type){
                console.log(this.data)
            }else{
                console.log('not click')
            }
        };

    var test = new ViewObject();

위의 예는 내가 좀 고쳤지만, 문제를 설명할 수 있다.이런 유연성도 좀 높다.
전재는 소서산자에서 왔다고 밝혀주세요 [http://www.cnblogs.com/xesam/] 본문 주소:http://www.cnblogs.com/xesam/archive/2012/03/26/2418255.html