1, addEventListener parameters
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted ]); // Gecko/Mozilla only
- type represents the type of event monitor string.
- listener callback function
- Optional options
- capture: Boolean, spread represents the listener to trigger the EventTarget In this type of event capture stage.
- once: Boolean, indicate listener calls after adding up to only once. If it is true, listener automatically removed after it is called.
- passive: When Boolean, set to true, indicate listener never call preventDefault (). If the listener still call this function, the client will ignore it and throw a console warning.
- useCapture optional event bubbling (false) or event capture (true) stage trigger callback function.
2, the use of passive scrolling improved performance
According to the default value specification, passive option is always false. However, this introduces the possibility of processing certain touch events (and other) event listeners to stop the main thread of the browser when trying to process rolling, resulting in performance during the rolling process may be greatly reduced.
The default is to prevent this problem, some browsers (especially Chrome and Firefox) has touchstart and touchmove events passive option to change the value to true document-level node Window, Document and Document.body. This prevents calls the event listener, so when the user scrolls the page is rendered unable to prevent.
var elem = document.getElementById('elem');
elem.addEventListener('touchmove', function listener() { /* do something */ }, { passive: true });
After adding passive parameters, touchmove event does not block the page scrolling (also applies to mouse wheel events).
Many pages will monitor touchstart touch events such as the mobile side, like this:
document.addEventListener ( "touchstart", function (E) {
... // browser does not know that there will not be a e.preventDefault ()
})
Since touchstart cancelable property of the event object is true, that is its default behavior can be monitored via the preventDefault () method to stop, what its default behavior is it, in general, is to scroll the current page (may also be scaled page ), if it's the default behavior is prevented, the page must be stationary. But the browser can not know a listener will call the preventDefault (), it can do only wait for listeners to go after the implementation of the implementation of the default behavior, and the listener is to perform time-consuming, and some even took obvious , which would cause the page Caton. The video also said that even if the listener is an empty function, will have some Caton, after all, empty function will perform time-consuming.
The video also said that 80% of the rolling event listener is not going to prevent the default behavior, which means that in most cases, the browser is white and so. Therefore, the birth of a passive listener, passive means "obedient", indicating that it will not default behavior of the event say no, the browser knows a listener is passive, it can simultaneously execute two threads in listeners JavaScript code and the browser's default behavior.
下面是在 Chrome for Android 上滚动 cnn.com 页面的对比视频，右边在注册 touchstart 事件时添加了 {passive: true} 选项，左边没有，可以看到，右边的顺畅多了。