2011-09-09 6 views
0

시나리오 : jQuery를 사용하면 특정 이벤트에 대해 여러 바인드가 수행됩니다. 이벤트가 발생하면 지정된 기능이 PER 트리거 후에 실행됩니다.jQuery 트리거가 한 번만 작동합니다.

챌린지 : jQuery 트리거가 작동하는 방식은 트리거가 호출 될 때 연결된 함수가 해당 이벤트의 바인드 수와 같은 횟수만큼 실행된다는 것입니다. 각 트리거에서 함수는 한 번만 실행해야합니다. 이것이 어떻게 달성 될 수 있는가. 이벤트가 트리거 될 때마다 함수가 실행되어야하기 때문에 "one"은 시나리오에서 작동하지 않습니다.

미리 감사드립니다.

업데이트 : 더 구체적인 것은 아닙니다.

페이지로드시 사용자 정의 이벤트가 발생할 때 페이지의 다른 요소가 등록되므로 요구 사항은 참여할 것입니다.

사용자 지정 이벤트가 트리거되거나 발생하면 등록 된 모든 요소에 대해 일부 작업을 수행하는 함수가 호출됩니다.

예 : 다른 부분 뷰 (MVC)에서 포함 된 요소입니다. 준비 문서에

<html> 
<a href="#" id="triggerelement">Trigger element</a> 
<div id="element1" data-join="aevent">something 1</div> 
<div id="element2" data-join="aevent">something 2</div> 
<div id="element3" data-join="aevent">something 3</div> 
<div id="element4" data-join="aevent">something 4</div> 
</html> 
  1. - "데이터 결합"을 모든 요소 이벤트 "aevent"에 결합합니다.
  2. 트리거 ("aevent")가 호출되면 바인딩 함수는 "aevent"에 참여해야하는 모든 요소를 ​​수집하고 이에 대한 조작을 수행해야합니다. 내가으로 실행하고

두 가지 문제 :

  1. 어떤 요소에 "바인딩"에 - $ 바인딩 (?).. 이유 : 여러 요소가이 사용자 지정 이벤트를 발생시킬 수 있으며 이벤트를 발생시키는 요소를 알 수 있거나 알려서는 안됩니다. 한 가지 생각은 - $ (document) .bind/$ (document) .trigger였습니다. 이것이 최선의 접근 방법입니까? $(). 트리거가 나는 단지 번 호출 당보다는 해당 이벤트에 바인딩 된 각 요소에 대해 관련 함수를 호출하도록 할 수 있습니다 방법을 호출 할 때 jQuery를 사용

  2. .

+0

여러 번 바인딩을 중지 하시겠습니까? 또는'var myTrigger = function() {}'을 사용하고'event + = myTrigger'를 한 번 바인드합니까? (또는 내가 잘못 이해하고 있는가?) "다중"바인딩을 "필터링"하는 "프록시"처리기를 바인딩 할 수도 있습니다. –

+0

은 맞춤 이벤트로 당신을위한 솔루션입니까? – voigtan

답변

2

기능을 바인딩 할 때 네임 스페이스를 사용해 보셨습니까? 이것은 당신이 생각하고 무엇을, 그러나 여기에서 당신에게 무엇이 가능한지의 아이디어를 제공하기 위해 뭔가 경우

$('a').bind("click.name1", function() { 
    alert("name1"); 
}); 
$('a').bind("click.name2", function() { 
    alert("name2"); 
    $("a").unbind("click.name1"); 
}); 

http://jsfiddle.net/hssHZ/

+0

음 .. 만약 내가 바인딩을 해제하면 그 요소에 다시 그 사건을 일으킬 수 없습니다. 권리? 나는 그것을 원하지 않는다. – Pakora

1

나는하지 단서가있다. 직접 호출 스택을 유지 관리하고 제어 할 수 있습니다. 그러면 콜 스택에 세 개의 함수가 추가되고 팝업 링크를 클릭하면 스택 맨 위에있는 함수가 실행됩니다.

http://jsfiddle.net/uQumm/1

var callstack = []; 

function popcallstack(e) 
{ 
    e.preventDefault(); 
    return callstack.pop()(); 
} 

//bind once 
$('#foo').click(popcallstack); 

callstack.push(function() { alert('executed1') }); 
callstack.push(function() { alert('executed2') }); 
callstack.push(function() { alert('executed3') }); 

는 아마도 이것은 당신이 후있어 컨트롤을 제공 할 것입니다.아, 그리고 당신은 jQuery가 기본적으로 당신을 위해 이런 종류의 일을 할 것이라는 것을 알아야합니다. 이것은 당신이 무언가를 할려고 할 때 단순히 설명하는 것입니다.

0

jQuery를 사용하는 경우 일회성 이벤트를 구현하는 잘 알려지지 않은 one() 이벤트 바인딩 메소드가 있습니다.

$("#myelement").one("click", function() { alert("You'll only see this once!"); }); 

자동 제거 핸들러
당신은 원시 자바 스크립트를 사용하는 경우, 어떤 핸들러 함수는 한 줄의 코드 사용 자체를 제거 할 수 있습니다

document.getElementById("myelement").addEventListener("click", handler); 
// handler function 
function handler(e) { 
    // remove this handler 
    e.target.removeEventListener(e.type, arguments.callee); 

    alert("You'll only see this once!"); 
} 

핸들러 이벤트 인수를 가정하면의 이름은 'e'행 :

e.target.removeEventListener(e.type, arguments.callee); 

처음으로 처리기를 제거합니다. 좋아. 핸들러에 사용하는 이벤트 유형이나 이름은 중요하지 않습니다. 심지어 인라인 익명 함수 일 수도 있습니다.

참고 IE8 이하에서는 작동하지 않는 표준 이벤트 호출을 사용했습니다. OldIE의 경우 detachEvent에 대한 호출이 필요하며 유형에 "on"접두어가 있어야합니다 (예 : "onclick". 그러나 oldIE를 지원하는 경우 jQuery 또는 사용자 정의 이벤트 핸들러를 사용하고있을 가능성이 큽니다.

유연성이 필요한 경우 자동 제거 핸들러가 가장 좋습니다. 다른 조건 (예 : 이벤트)이 발생한 후에 특정 이벤트 유형의 연결을 해제하거나 핸들러를 제거하려는 경우에만 사용할 수 있습니다. 두 번 이상의 클릭.

당신이 모든 핸들러 함수에 이벤트 제거 줄을 추가 너무 게으른 또는 건망증이 될 수있다
일회성 이벤트 생성 기능.

// one-time event 
onetime(document.getElementById("myelement"), "click", handler); 



// handler function 
function handler(e) { 
    alert("You'll only see this once!"); 
} 

하나를 필요로하지 않지만 우리는 일회성에만 이벤트를 필요로 할 때마다 우리는 이제이 기능을 사용할 수 있습니다

// create a one-time event 
function onetime(node, type, callback) { 
    // create event 
    node.addEventListener(type, function(e) { 
     // remove event 
     e.target.removeEventListener(e.type, arguments.callee); 
     // call handler 
     return callback(e); 
    }); 

} 

:의 우리의 노력을하는 일회성 기능을 만들어 보자 자바 스크립트 개발자가 사용할 수있는 몇 가지 옵션이 있다는 것을 알면 좋습니다.

관련 문제