Regular Motion

개발자가 상팔자

[Javascript] addEventListener와 관련하여.

일반적으로 아래와 같은 방법으로 DIV Element에 Event Listener를 등록하면,

normalHandler (Callback)이 호출될 때 this는 Element 자신을 가르키게 된다.

즉, EventListener로 함수를 넘겨주게 되면, Callback이 호출될 때의 Context는 Element자신이 된다.

이 방법은 Callback안에서 Element의 id나 class, value에 접근해야 하는 경우 유용하다.

하지만 Touch Scroll 이나 Drag 같은 기능은 Callback의 Context를 원하는 Object로 정의했을 때 편한 경우가 많이 있다.

그럴 때는 handleEvent를 속성으로 갖는 instance를 넘겨주면 Callback으로 instance의 handleEvent가 호출되며,

Callback에서의 this는 instance를 가르킨다.


라잇댓. addEventListener의 2번째 인자로 function이 아닌 Instance를 전달!

Instance의 prototype에 handleEvent가 정의되어 있기 때문에 Callback을 받을 수 있다.

MUST CHECK WHAT ‘THIS’ IS. & XY INCREAMENT.



iScroll에서 이와 같은 방법으로 Scroll을 처리하는 코드


iScroll의 prototype에 handleEvent를 정의하고, 이후 Scroll Area에 Event Listener를 추가할 때

iScroll instance를 2번째 인자로 전달한다.

1 Comment

  1. handleEvent를 정의하는 것이 좀 어떨까 고민스러워보여요
    그냥 bind를 하는 식으로 하는 건 해결이 안될까요?

    예를들어 이런식,

    MyHandler.prototype.printLog = function(dummyString,e) {

    console.dir(e.target); //따라오는 이벤트객체
    console.dir(dummyString); //추가인자전달
    console.dir(this);
    console.dir(this.x+=5);
    console.dir(this.y+=5);

    };

    var handlerInstance = new MyHandler();
    document.getElementById(‘by_object’).addEventListener(‘click’, handlerInstance.printLog.bind(handlerInstance,”dummy”), false);

답글 남기기

© 2017 Regular Motion

Theme by Anders NorenUp ↑