Introduction: In the visual map project, VUE-Seamless Scroll was used to automatically scroll table data, but there was a bug that click events of copied data were invalid. The underlying implementation of this plug-in is in the form of cope,
The principle of infinite scrolling: the principle of infinite scrolling is to copy the content of the previous traversal, and scroll these two parts of the content to achieve seamless scrolling effect. (Usually a large amount of data has this effect, but a small amount of data, I don’t let it scroll).
Problem analysis:
When the data in the first UL has been scrolled (real data), the click event in the second UL part does not work (copied data), and cannot implement some of the click-line, popup details required by the business.
I need this data to add some click events, pop up secondary pages and region switching effects.
Solutions:
A:
Using event delegation:
Event delegate, also known as event broker, is to manage all events of a certain type by specifying only one event handler using event bubbling.
In general, the DOM needs to have the event handler, we will give it to set the event handler directly, but if there is a lot of DOM need to add the handle events, for example, there are a lot of li, under a ul need to add the same to every li click event, this time we usually use the method of the for loop, iterate through all the elements, Then add click events to them, and while it may seem like a perfectly reasonable way to do this, there are huge performance drawbacks behind it.
In JS, the number of event handlers added to the page will be directly related to the overall running performance of the page. Because it needs to interact with DOM nodes constantly, the more times the DOM is accessed, the more times the browser will have to redraw and rearrange, which will prolong the interaction ready time of the whole page. This is why the main idea of performance tuning is to reduce DOM manipulation.
In this case, if the time delegate is used, all the operations will be put into the JS program, and the operation with DOM will only need to interact once, which can greatly reduce the number of interactions with DOM; And each function is an object that is an object will use memory, object, the more the greater the memory usage rate, the performance will naturally, if you use event delegation, we can only on one of its parent object, value so that we will need a memory space is enough, a lot of save the memory space, improve the overall performance of the page.
Add a click event to the outer div and retrieve the dom element from the click via event.target
Bind attributes to the elements of the clicked column. Here I bind the id and the custom attribute data-obj object, and directly add the item of the changed column instead of binding each one individually.
Click method, cancel the original click method, and call it directly at the bottom. ,
Write a more general method for the other several pages to follow this method is also very useful, do not bind one by one, the class row is purely made a flag bit, easy to determine after the loop, if not clear, direct console.log, easy to locate each variable.
