YUI3 - 동일한 클래스를 가진 링크에 대한 OnClick 이벤트 처리

Question

문제 : 동일한 클래스를 가진 링크에 대한 OnClick 이벤트 처리

같은 클래스를 가진 페이지에 링크가 거의 없습니다. 링크 중 하나를 클릭하면 어떤 링크를 클릭했는지에 따라 취할 수있는 여러 가지 조치가 있습니다 (예 :

<a href="?page=1" data="test1" class="sample">One</a> 
<a href="?page=2" data="test2" class="sample">two</a> 
<a href="?page=3" data="test3" class="sample">three</a> 

처리기 코드 :

Y.all('.sample').on('click', function(e){ 
    e.preventDefault(); 
    alert(this.getAttribute("data")); 
}); 

나는 모든 "데이터"속성의 목록을 링크 중 하나를 클릭합니다. 클릭 한 데이터 만 필요합니다.

Answer 1

all은 일치하는 요소 목록을 제공합니다. each을 사용하여 목록을 반복하고 개별 노드에 대한 작업을 수행 할 수 있습니다. 자세한 내용은 Node Class API을 참조하십시오.

여기 코드 번호는 an example on jsfiddle입니다.

Y.all('.sample').each(function(node) { 
    node.on('click', function(e) { 
     e.preventDefault(); 
     alert(node.getAttribute("data")); 
    }); 
});​ 

또한 yuilibrary.com에 이벤트 사용 설명서에서이 질문에 대한 자주 묻는 질문 항목이 (http://yuilibrary.com/yui/docs/event/#nodelist-this). 일반적으로 이벤트 위임을 사용하는 것이 좋습니다. event delegation을

Y.all('.sample').on('click', function(e){ 
    e.preventDefault(); 
    alert(e.target.getAttribute("data")); 
}); 

을 그리고 더 나은 성능을 위해 다음을 사용할 수 있습니다 : 당신은 또한 요소에 액세스하는 대신 this의 e.target을 사용할 수 있습니다

Answer 2

가 클릭되는

다음

Y.one('body').delegate('click', function(e){ 
    e.preventDefault(); 
    alert(this.getAttribute("data")); 
}, '.sample'); 

Answer 3

이벤트 위임 더 나은 솔루션입니다, @juandopazo 동의 함

위임을 사용하지 않으려면 Y.all ('. .

Y.on('click', function(e){ 
    e.preventDefault(); 
    alert(this.getAttribute("data")); 
}, '.sample'); 

이 위임 구문 (청취자되지 않습니다 : 샘플 ') @ user322896 각 (...) (솔루션) 또는 e.target (@juandopazo에서 솔루션),하지만 난 보통 다른 방법을 링크 directelly에 붙어있을 것이고) NodeList 객체가 없기 때문에 this은 특정 링크 노드를 참조합니다. 이 방법은 또한 Y.all('.sample')과 비교하여 우월 성능을 가지고 있습니다. 이것을 읽으십시오 : Why would I use Y.on() or Y.delegate() instead of node.on() and node.delegate()?