AddEventListener parameters

Any object that supports an event can be an event target, such as Element, Document, Window, and so on.

  1. Optional parameters are supportedoptionsThe browser
target.addEventListener(eventType,callback,options)
Copy the code

options={capture:Boolean,once:Boolean,passive:Boolean}

Capture: The default is false, which means the event is emitted during the bubble phase, or true, which means the event is emitted during the capture phase.

Once: The default is false. If true, the listener is cleared as soon as the event is raised.

Passive: The default is false, but true for touchMove and Touchend events. If true, preventDefault() is disabled.

  1. In modern browsers, the third parameter can be directly converted touseCapture
target.addEventListener(eventType,callback,useCapture)
Copy the code

UseCapture: The default is false and the callback is performed during the bubble phase in the DOM tree or during the capture phase when set to true

The reason there are two different event streams is because Microsoft developed event bubbling streams, in which the DOM tree fires from the bottom up; Netscape, on the other hand, developed an event capture stream, with the DOM tree firing from top to bottom. When the W3c developed the standard, it allowed the developer to choose between the two streams of events.

Compatible with Internet Explorer of earlier versions

if (el.addEventListener) {
  el.addEventListener('click', callback, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', callback);
}
Copy the code

To save memory

First, if the same object is listening for the same event, EventListener is not called multiple times, and there is no need to manually remove extra EventListener with removeEventListener, because duplicate EventListener is automatically discarded. The value of capture in options is the same. If the value of capture is not the same, the definition is not discarded even if it is repeated.

Second, if the callback is used by multiple listeners, you can create a named function that is referred to each time you listen for the event, avoiding creating a separate new function each time.

var i;
var els = document.getElementsByTagName('*');

function processEvent(e){
  /*do something*/
}
for(i=0 ; i<els.length ; i++){
  els[i].addEventListener("click", processEvent, false});
}
Copy the code

Finally, after the execution element to monitor events, if not in use, should be timely remove event listeners, target. The removeEventListener (event), free memory.

Passive concrete analysis

For touch-screen events such as TouchMove and TouchStart, the default value is true to prevent the browser from scrolling up, down, left, and right. Similarly, if you want to prevent the touch browser from sliding left and right, you can add event listeners like this

document.addEventListener('touchmove',(e)=>{e.preventDefault()},{passive:false})
Copy the code

Note: If the browser does not support options, this defaults to the useCapture attribute.

If you just want to prevent the screen from sliding left and right, you can make a comparison between the left and right displacement and the up and down displacement

let start;
document.addEventListener("touchstart",(e)=>{
    start= [e.targetTouches[0].pageX,e.targetTouches[0].pageY];
});
document.addEventListener("touchmove",(e)=>{
    let move = [e.targetTouches[0].pageX, e.targetTouches[0].pageY];
    if(Math.abs(move[0]-start[0])>Math.abs(move[1]-start[1])){
        e.preventDefault();
    }
},{passive:false});
Copy the code