Thoughts on jQuery event binding

First, let's take a look at the following common event binding code: // example $ ('# dom '). click (function (e) {// do something}); $ ('# dom2 '). click (function (e) {// do something}); this code has some defects in event binding processing: 1. excessive event binding will consume memory. 2. there will be no event binding in the HTML generated later, and you need to re-bind 3. the syntax is too complicated. Solution for the two-point solution: 1 and 2. First, let's take a look at the jQuery event binding. jQuery event binding has multiple methods that can be called. The click event is used as an example: · click method · bind method · delegate method · on method no matter which method you use (click/bind/delegate, at the bottom layer of jQuery, The on method is called to complete the final event binding. Therefore, from a certain point of view, in addition to the convenience and habits of writing, it is better to simply use the on method to make it easy and direct. For more information about the methods and use cases, visit the official jQuery website. Api.jquery.com first needs to clearly understand the memory usage gap between different event binding methods. Chrome Developer Tools will be used for performance analysis. Profiles --> Take Heap Snapshot. With this tool, we can see the memory occupied by Javascript and analyze performance problems. Demo html