Tác động của danh sách sự kiện ảnh hưởng đến?

Question

Eventlisteres có tác động gì? Im nói về những con số lớn, đây là một ví dụ:

• Chỉ có x lượng .marker lúc đầu
• Tất cả trẻ em được thêm vào qua JS khi .marker được nhấp - eventlistener
• Mỗi đứa trẻ làm nó riêng điều đó có nghĩa là mỗi người trong số họ có danh sách sự kiện riêng của họ

---

<!-- Final HTML of single .marker when it has been clicked --> 
<div class="marker"> 
    <div class="remove"></div> 
    <div class="change"></div> 
    <div class="add"></div> 
    <div class="drag"></div> 
</div> 

---

var count = 20 000; 

for(i = 0; i < count; i++) { 

    var marker = document.createElement('div'); 
    marker.className = 'marker'; 
    someParentElement.appendChild(marker); 

    marker.click(function() { 
     //Create child elements 
     var remove = document.createElement('div'); 
     remove.className = 'remove'; 
     marker.appendChild(remove); 

     var change = document.createElement('div'); 
     change.className = 'change'; 
     marker.appendChild(change); 

     var add = document.createElement('div'); 
     add.className = 'add'; 
     marker.appendChild(add); 

     var drag = document.createElement('div'); 
     drag.className = 'drag'; 
     marker.appendChild(drag); 

     //Children eventlisteners 
     remove.click(function() { 
      //Do it's thing 
     }); 
     change.click(function() { 
      //Do it's thing 
     }); 
     add.click(function() { 
      //Do it's thing 
     }); 
     drag.click(function() { 
      //Do it's thing 
     }); 
    }); 
} 

Xin đừng bận tâm những thứ khác, ví dụ tạo 20 000 yếu tố lập trình. Câu hỏi của tôi là: điều gì sẽ là tác động của việc có tất cả các danh sách sự kiện này với tất cả mã này trong chúng? Có hay không có vấn đề gì hoặc bao nhiêu mã bên trong eventlistener miễn là nó chưa được kích hoạt?

Answer 1

Hãy thử sử dụng ủy quyền sự kiện, trình xử lý sự kiện đơn lẻ. Xem switch, .is()

var count = 100; 
 

 
for (i = 0; i < count; i++) { 
 

 
    var marker = document.createElement('div'); 
 
    marker.className = 'marker'; 
 
    marker.innerHTML = marker.className + " " + i; 
 
    document.body.appendChild(marker); 
 

 
    //Create child elements 
 
    var remove = document.createElement('div'); 
 
    remove.className = 'remove'; 
 
    remove.innerHTML = "remove" + i; 
 
    marker.appendChild(remove); 
 

 
    var change = document.createElement('div'); 
 
    change.className = 'change'; 
 
    change.innerHTML = "change" + i; 
 
    marker.appendChild(change); 
 

 
    var add = document.createElement('div'); 
 
    add.className = 'add'; 
 
    add.innerHTML = "add" + i; 
 
    marker.appendChild(add); 
 

 
    var drag = document.createElement('div'); 
 
    drag.className = 'drag'; 
 
    drag.innerHTML = "drag" + i; 
 
    marker.appendChild(drag); 
 
    //Create child elements 
 
} 
 

 
var check = function(args) { 
 
    alert(args.innerHTML.replace(/[^\d+]/g, "")) 
 
} 
 

 
var obj = { 
 
    remove: check, 
 
    change: check, 
 
    add: check, 
 
    drag: check 
 
} 
 

 
var message = function(name) { 
 
    console.log(name) 
 
} 
 

 
$("body").on("click", ".marker", function(event) { 
 
    var name = event.target.className; 
 
    switch (name) { 
 
    case "remove": 
 
     /* do stuff */ 
 
     message(name); 
 
     break; 
 
    case "change": 
 
     /* do stuff */ 
 
     message(name); 
 
     break; 
 
    case "add": 
 
     /* do stuff */ 
 
     message(name); 
 
     break; 
 
    case "drag": 
 
     /* do stuff */ 
 
     message(name); 
 
     break; 
 
    default: 
 
     /* do stuff */ 
 
     alert(name); 
 
     break; 
 
    } 
 

 
    // utilizing `.is()` 
 
    if ($(event.target).is(".remove")) { 
 
    // do stuff 
 
    event.target.innerHTML += "clicked" 
 
    } 
 
    if ($(event.target).is(".change")) { 
 
    // do stuff 
 
    event.target.innerHTML += "clicked" 
 
    } 
 
    if ($(event.target).is(".add")) { 
 
    // do stuff 
 
    event.target.innerHTML += "clicked" 
 
    } 
 
    if ($(event.target).is(".drag")) { 
 
    // do stuff 
 
    event.target.innerHTML += "clicked" 
 
    } 
 
    if (!$(event.target).is(".marker")) { 
 
    // utilizing an object 
 
    obj[event.target.className](event.target) 
 
    } 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script>

Answer 2

Tạo xử lý sự kiện cho quá nhiều thứ được lặp đi lặp lại cảm thấy như một sự lãng phí chu kỳ CPU, cộng thêm bộ nhớ để quản lý rất nhiều người nghe sự kiện. Thay vào đó, nó sẽ là thích hợp hơn khi sử dụng sự kiện bubbling/delegate để lắng nghe các sự kiện nhấp chuột từ nút cha (như một phần tử tổ tiên nhất có thể sẽ là lý tưởng) và xem phần tử nào đã kích hoạt sự kiện và gọi mã thích hợp cho phù hợp.

Đây sẽ là liên kết một lần và cũng nên nắm bắt các yếu tố được thêm động nếu được thực hiện đúng.

Ví dụ với jQuery mà cũng được giải thích khá tốt bao gồm

https://learn.jquery.com/events/event-delegation/ http://api.jquery.com/on/

Mặc dù bạn không giới hạn chỉ jQuery để thực hiện điều này.

Hy vọng điều đó sẽ hữu ích.