Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what are the advantages of js event delegation". In daily operation, I believe many people have doubts about the advantages of js event delegation. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "what are the advantages of js event delegation?" Next, please follow the editor to study!

1. Binding to the parent element only needs to be bound once, saving performance.

2. Child elements do not need everyone to bind to the same event.

3. If a new child element is added later, the event monitoring of the parent element will be automatically received because of the event delegate.

Example

/ / for the example of native js event delegate, the css part can ignore ul {list-style: none;display: flex;} ul li {width: 50pxash height: 50pxscape height: 50pxpolitical textMutual align: center;background: pink;font-weight: bold;border: 1px solid # eee;} ul li:hover {cursor: pointer;} 12345var ul = document.querySelector ("ul"); var li = document.querySelectorAll ("li") Ul.onclick = function (e) {/ / e refers to event, event object var target = e.target | | e.srcElement / / target gets the target (li) if (target.nodeName.toLowerCase () = = 'li') {/ / the node name of the target (li) is converted to lowercase letters, and if not, it is the uppercase letter alert (target [XSS _ clean])}}. At this point, the study on "what are the advantages of js event delegation" is over, hoping to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.