Đoàn đại biểu tổ chức sự kiện Vanilla JavaScript

Question

Cách tốt nhất (nhanh nhất/thích hợp) để làm đại biểu sự kiện trong vanilla js là gì?

Ví dụ nếu tôi có điều này trong jQuery:

$('#main').on('click', '.focused', function(){ 
    settingsPanel(); 
}); 

Làm thế nào tôi có thể dịch đó để vani js? Có lẽ với .addEventListener()

Con đường tôi có thể nghĩ đến việc này là:

document.getElementById('main').addEventListener('click', dothis); 
function dothis(){ 
    // now in jQuery 
    $(this).children().each(function(){ 
     if($(this).is('.focused') settingsPanel(); 
    }); 
} 

Nhưng điều đó dường như không hiệu quả đặc biệt là nếu #main có nhiều trẻ em.

Đây có phải là cách thích hợp để làm điều đó không?

document.getElementById('main').addEventListener('click', doThis); 
function doThis(event){ 
    if($(event.target).is('.focused') || $(event.target).parents().is('.focused') settingsPanel(); 
} 

Answer 1

I've come up with a simple solution mà dường như làm việc khá tốt (di sản IE hỗ trợ mặc dù). Ở đây chúng ta mở rộng EventTarget 's nguyên mẫu để cung cấp một phương pháp delegateEventListener trong đó hoạt động bằng cách sử dụng cú pháp sau:

EventTarget.delegateEventListener(string event, string toFind, function fn) 

Tôi đã tạo một khá phức tạp fiddle để chứng minh nó trong hành động, nơi mà chúng tôi ủy thác tất cả các sự kiện cho các yếu tố màu xanh lá cây. Dừng tuyên truyền tiếp tục hoạt động và bạn có thể truy cập những gì cần là event.currentTarget thông qua this (như với jQuery).

Dưới đây là giải pháp đầy đủ:

(function(document, EventTarget) { 
    var elementProto = window.Element.prototype, 
     matchesFn = elementProto.matches; 

    /* Check various vendor-prefixed versions of Element.matches */ 
    if(!matchesFn) { 
    ['webkit', 'ms', 'moz'].some(function(prefix) { 
     var prefixedFn = prefix + 'MatchesSelector'; 
     if(elementProto.hasOwnProperty(prefixedFn)) { 
     matchesFn = elementProto[prefixedFn]; 
     return true; 
     } 
    }); 
    } 

    /* Traverse DOM from event target up to parent, searching for selector */ 
    function passedThrough(event, selector, stopAt) { 
    var currentNode = event.target; 

    while(true) { 
     if(matchesFn.call(currentNode, selector)) { 
     return currentNode; 
     } 
     else if(currentNode != stopAt && currentNode != document.body) { 
     currentNode = currentNode.parentNode; 
     } 
     else { 
     return false; 
     } 
    } 
    } 

    /* Extend the EventTarget prototype to add a delegateEventListener() event */ 
    EventTarget.prototype.delegateEventListener = function(eName, toFind, fn) { 
    this.addEventListener(eName, function(event) { 
     var found = passedThrough(event, toFind, event.currentTarget); 

     if(found) { 
     // Execute the callback with the context set to the found element 
     // jQuery goes way further, it even has it's own event object 
     fn.call(found, event); 
     } 
    }); 
    }; 

}(window.document, window.EventTarget || window.Element)); 

Answer 2

Tôi có một giải pháp tương tự để đạt được đoàn sự kiện. Nó sử dụng các hàm Array slice, reverse, filter và forEach.

• slice chuyển đổi NodeList từ truy vấn thành mảng, phải được thực hiện trước khi được phép đảo ngược danh sách.
• reverse đảo ngược mảng (làm cho traversion thức bắt đầu càng gần với sự kiện mục tiêu càng tốt.
• filter kiểm tra mà các yếu tố chứa event.target.
• forEach gọi là xử lý được cung cấp cho mỗi phần tử từ kết quả lọc càng lâu như xử lý không trả lại false.

chức năng trả về chức năng đại biểu được tạo ra, mà làm cho nó có thể để loại bỏ người nghe sau. Lưu ý rằng nguồn gốc event.stopPropagation() không n ot dừng di chuyển ngang qua validElements, vì pha sủi bọt đã đi qua đến phần tử ủy nhiệm.

function delegateEventListener(element, eventType, childSelector, handler) { 
    function delegate(event){ 
     var bubble; 
     var validElements=[].slice.call(this.querySelectorAll(childSelector)).reverse().filter(function(matchedElement){ 
      return matchedElement.contains(event.target); 
     }); 
     validElements.forEach(function(validElement){ 
      if(bubble===undefined||bubble!==false)bubble=handler.call(validElement,event); 
     }); 
    } 
    element.addEventListener(eventType,delegate); 
    return delegate; 
} 

Mặc dù nó không được khuyến khích để mở rộng nguyên mẫu có nguồn gốc, chức năng này có thể được bổ sung vào nguyên mẫu cho EventTarget (hoặc Node trong IE).Khi làm như vậy, hãy thay thế element bằng this trong hàm và xóa thông số tương ứng (EventTarget.prototype.delegateEventListener = function(eventType, childSelector, handler){...}).