YUI3 onclick xử lý cho các liên kết có cùng một lớp

Question

Issue sự kiện. Khi tôi nhấp vào một trong các liên kết, có một số hành động khác nhau được thực hiện dựa trên liên kết được nhấp vào, Ví dụ:

<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> 

mã xử lý:

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

khi tôi nhấp vào bất kỳ liên kết tôi nhận được danh sách của tất cả các "dữ liệu" thuộc tính. Chúng tôi chỉ cần dữ liệu của liên kết được nhấp.

Answer 1

all cung cấp cho bạn danh sách các yếu tố phù hợp. Bạn có thể sử dụng each để lặp qua danh sách và thực hiện các công cụ cho từng nút riêng lẻ. Tham khảo Node Class API của họ để biết thêm thông tin.

Đây là mã và an example on jsfiddle.

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

Ngoài ra còn có một mục Hỏi đáp cho câu hỏi này trong hướng dẫn sử dụng tổ chức sự kiện trên yuilibrary.com (http://yuilibrary.com/yui/docs/event/#nodelist-this). Thông thường, bạn nên sử dụng ủy quyền sự kiện.

Answer 2

Bạn cũng có thể sử dụng e.target thay vì this để truy cập các phần tử được nhấp:

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

Và đối với hiệu suất tốt hơn bạn có thể sử dụng event delegation:

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

Answer 3

đây đoàn sự kiện là giải pháp tốt hơn, đồng ý với @juandopazo

Nếu bạn không muốn sử dụng ủy quyền, bạn có thể sử dụng Y.all ('. . Mẫu ') từng (...) (giải pháp từ @ user322896) hoặc e.target (giải pháp từ @juandopazo), nhưng tôi thường làm điều đó một cách khác:

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

Đây không phải là một cú pháp đoàn (nghe sẽ được đính kèm trên các liên kết directelly) và không có đối tượng NodeList, vì vậy this đề cập đến nút liên kết cụ thể. Bằng cách này cũng có lợi thế trước khi so sánh với Y.all('.sample'), hãy đọc: Why would I use Y.on() or Y.delegate() instead of node.on() and node.delegate()?