HTML5 드롭 이벤트가 범위와 다른 e.target을 가짐

Question

다음 패턴을 사용하여 HTML5 끌어서 놓기 구현을 만들려고합니다.

이 패턴을 사용하면 드롭 처리기에서 클래스의 범위를 유지할 수 있습니다.이 클래스의 다른 모든 속성과 함수를 참조 할 수 있기 때문에 좋습니다.

이

el.addEventListener('drop', function(){ 
    console.log(this, e.target) 
}, false); 

위의 예에서 사실 이것과 e.target는 전혀 다른 DOM 객체가 될 것이다 : 그러나 e.target은 "이"다음 예에서와 같은 DOM 객체를 노출하지 않습니다 밝혀 여기서 "this"는 드래그 가능한 객체 (tr)이고 e.target은 td 요소입니다.

이 문제를 해결하기 위해이 클래스를 구성하는 합리적인 방법이 있습니까?

Answer 1

당신이 직면 한 문제는 e.target이 이벤트가 첨부 된 요소 (el)가 아닌 가장 안쪽 요소로 항상 올라와 있다는 것입니다.

가장 논리적 인 접근 방식은 요소 당 ReorderStories의 인스턴스를 정확히 하나씩 가지는 것입니다. 당신은 같은 것을 할 수있는이 경우

var ReorderStories = function(el) { 
    this.el = el; 
    this.addEvents(el); 
}; 

을, 모든 이벤트, this는 ReorderStories의 인스턴스를 참조 것이고 this.el하면 이벤트가 부착 된 요소를 참조한다.