Techniques for writing highly efficient javascript events

How to make efficient web Front-end programs is a problem that I will not consciously consider every time I do front-end development. A few years ago, Yahoo's awesome front-end engineers issued a book on improving web Front-end performance, how to make efficient web Front-end programs is a problem that I will not consciously consider every time I do front-end development. A few years ago, Yahoo's awesome front-end engineers published a book about improving the web Front-end performance, which caused a sensation in the entire web development technology field, turning the mysterious web front-end optimization problem into a cabbage, web Front-end optimization becomes a simple question that cainiao and Daniel can answer. When the industry knows the answer, the existing optimization technology can no longer overhead the quality of your website. In order to make our website develop better performance than other websites, we need to think deeply and independently, reserve better skills.

The Event System in Javascript is the first breakthrough point I have come up. Why is it a javascript Event System? We all know that the web Front-end contains three technologies: html, css, and javascript. it is clear how html and css are combined: style, class, id, and html Tag, but how can javascript be integrated into html and css? Finally, I found that the starting point is the javascript Event System. No matter how complicated javascript code we write, the event system is finally reflected in html and css, therefore, I am thinking that since the event system is the integration of the three, there will inevitably be a large number of event operations on a page, especially on today's increasingly complex web pages, without these events, the javascript code we have carefully compiled is only a warehouse, and the hero is useless. Since there will be a large number of event functions on the page, will there be problems affecting efficiency when we write event functions as we are used? The answer I have studied is true efficiency, and it is still a serious efficiency problem.

To clarify my answer, I need to explain in detail the javascript Event System.

The Event System is the entry point for integrating javascript, html, and css. This entry point is like the main function in java. Everything magic starts from here. How does the browser complete this cut-in? There are three methods I have studied:

Method: html event processing

Html event processing is to write the event functions directly in the html Tag. Because this write method is tightly coupled with the html tag, it is called html event processing. For example, the following code: