이벤트 처리기에서 반환 값을 재정의 하시겠습니까?

Question

이전에 이런 질문이 있었지만 답변을 찾지 못한 행운이 없었습니다. 아마도 내가 모르는 용어 일 겁니다.

jQuery 이벤트 핸들러는 트리거 된 요소 이외의 요소를 리턴 할 수 있습니까?

일반적으로 요소에 대해 jQuery 이벤트를 트리거하면 해당 요소는 이벤트 처리기에서 반환됩니다. 대신 다른 요소를 반환하는 방법이 있습니까? (등 다른 것보다 event.target, event.currentTarget)

여기

내 HTML이다 :

<div id="content"> 
    <div id="wrapper"> 
     <div class="instance"> 
     </div> 
    </div> 
</div> 

내가 #wrapper에 대한 사용자 정의 jQuery를 이벤트를 만들 경우에, 나는 할 수의 이벤트 핸들러는 .instance을 반환?

$('#content').on('new.instance', '#wrapper', function(event) { 
    var wrapper = $(event.currentTarget); 
    var instance = wrapper.find('div.instance').first(); 

    var newInstance = instance.clone(true, true); 
    newInstance.appendTo(wrapper); 

    return newInstance; 
}); 

var returnValue = $('#wrapper').trigger('new.instance'); 
console.log('returnValue.html():', returnValue.html()); // #wrapper, not .instance 

내가 new.instance 이벤트 핸들러는 .instance 요소를 반환 할 수 있습니다 :

여기 내 자바 스크립트입니까? 그렇다면 코드에서 무엇을 놓치고 있습니까?

Answer 1

.trigger()

... 저희 CSTE 연구진() 메소드를 사용하여 사용자 정의 이벤트 유형을 정의, 두번째 인자 .trigger()가 유용하게 사용될 수 있습니다.

당신은 단순히 두 번째 매개 변수로 .trigger 방법에 개체를 추가 할 수 있고 거기에 인스턴스를 수집합니다.

var instances = {data:[]}; 
 

 
$('#content').on('new.instance', '#wrapper', function(event, instances) { 
 
    var wrapper = $(event.currentTarget); 
 
    var instance = wrapper.find('div.instance').first(); 
 
    var newInstance = instance.clone(true, true); 
 
    instances.data.push(newInstance); 
 
    newInstance.appendTo(wrapper); 
 
}); 
 

 
$('#wrapper').trigger('new.instance', instances); 
 

 
console.log(instances.data[0].get(0)); 
 

 
// somewhere else at a latter time trigger new.instance again 
 
setTimeout(function() { 
 
    $('#wrapper').trigger('new.instance', instances); 
 
    $.each(instances.data, function(index, item) { 
 
    var counter = index + 1 
 
    item.text('cloned instance ' + counter); 
 
    console.log(item.get(0)) 
 
    }) 
 
}, 2000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <div id="wrapper"> 
 
    <div class="instance"></div> 
 
    </div> 
 
</div>

Answer 2

.instance은 event.chain이므로 bubbling phase 중 콜백으로 액세스 할 수 있습니다. 각 요소를 클릭하여 스 니펫을 검토하십시오.

니핏

var wrp = document.getElementById('wrapper'); 
 

 
wrp.addEventListener('click', function(e) { 
 
    if (e.target != e.currentTarget) { 
 
    var trueTarget = e.target.className; 
 
    alert(trueTarget + ' has been clicked!'); 
 
    } 
 
    e.stopPropagation(); 
 
}, false);

#content { 
 
    border: 2px dashed grey; 
 
    width: 50vw; 
 
    height: 50vh; 
 
    background: rgba(0, 0, 0, .3); 
 
    text-align: right; 
 
    color: white; 
 
} 
 
#wrapper { 
 
    border: 3px dotted orange; 
 
    background: rgba(0, 0, 0, .5); 
 
    width: 50%; 
 
    height: 50%; 
 
    text-align: right; 
 
    font-size: small; 
 
    color: orange; 
 
} 
 
.instance { 
 
    border: 1px solid yellow; 
 
    width: 50%; 
 
    height: 50%; 
 
    background: rgba(0, 0, 0, .7); 
 
    text-align: center; 
 
    font-size: smaller; 
 
    color: yellow; 
 
    
 
}

<div id="content"> 
 
    CONTENT 
 
    <div id="wrapper"> 
 
    WRAPPER 
 
    <div class="instance"> 
 
     INSTANCE 
 
    </div> 
 
    </div> 
 
</div>