Javascript 이벤트간에 매개 변수를 전달하는 깨끗한 방법?

Question

사용자가 드래그하고 요소 인덱스를 저장하려고 할 때와 같이 특정 이벤트가 발생하면 메모리에 유지하고자하는 값이 있습니다. 이 값은 다른 이벤트가 발생할 때 필요합니다. 나는 그것이 언제 발사 될지 모른다.

전역 변수를 사용하여이 값을 유지하고 있습니다. 네임 스페이스가있는 객체에이 값을 넣는 것보다 더 나은 방법이있는 것 같습니다. 은혜? 다른 제안?

Answer 1

각 값의 관련 컨테이너 인 부모 요소에 데이터를 바인딩 할 수 있습니다. 예를 들어 drag & drop 가능한 항목이 많은 #dragAndDropContainer가 있고 드래그 이벤트가 시작되면 (즉 드래그가 시작되면) 다음을 실행할 수 있습니다 (jQuery에서) :

그리고 필요할 때마다 $('#dragAndDropContainer').data('lastDragged')을 쿼리하십시오.

Answer 2

나는 davin의 솔루션을 좋아하지만, 여기가 대안이 될 수 있습니다. 다음과 같이 이벤트 핸들러 주변에 클로저를 만들 수 있습니다.

var data = { x: 1, y: 2 }; 
var handler = function() { 
    console.log(data); 
} 

if (node.addEventListener) { 
    node.addEventListener('mousedown', handler, false); 
} else { 
    node.attachEvent('onmousedown', handler); 
} 

Answer 3

항상 좋아하는 변수가 이벤트 처리기로 커서를 이동하고 있습니다. 카레는 함수 프로토 타입과 함수 호출 할 때 미리 설정된 인수 함수의 버전을 반환합니다

Function.prototype.curry = function curry() { 
    var fn = this, args = Array.prototype.slice.call(arguments); 
    return function curryed() { 
     return fn.apply(this, args.concat(Array.prototype.slice.call(arguments))); 
    }; 
}; 

node.addEventListener('mousedown', handler.curry(var1,var2,etc)); 

Answer 4

(때로는 카레로 알려진) Function.bind를 사용하는 대신 : 당신의 범위를 제어 할 수 있습니다 공유 변수. 다음은이를 보여주는 jQuery 의사 코드입니다. Shared는 두 핸들러가 액세스 할 수 있으며 다른 누구도 액세스 할 수 없습니다.

$(function(){ 
    var shared = {a:1, b:2}; 
    $('#id-1').click(function() { 
     alert(shared.a); 
    }); 

    $('#id-2').click(function() { 
     alert(shared.b); 
    }); 
}); 

jQuery 절차 코드를 작성하는 경우 클로저 방식이 훨씬 간단합니다. 필자가 작성한 대부분의 객체는 객체이기 때문에 차라리 너무 많은 수준의 내부 클로저가되지 않으므로 처리기가 공유 변수에 액세스해야하는 경우 바인딩/커링 (예 : Martin의 예)으로 핸들러를 설정하는 것을 선호합니다.