HTML learning-JavaScript event monitoring and AddEventListener parameter analysis

Event Monitoring

The interception of events in JavaScript is the method used to react to certain operations. For example, listen for a button pressdown, or get the left mouse button press the mouse position. These all need to be done using listening. The function of listening is simple: addEventListener .
Here's an explanation of the nesting relationship for a Web page: Outermost: Window contains: Document contains: HTML contains: Body contains: div, etc...

AddEventListener Listener Method Button Listener Event response

First we need to get a button handle, the method is very simple, the code is as follows:
var btn = document.getElementById("btnExample");
and givebtnTo add an event listener:
btn.addEventListener("click", btn_click_function, false);
Now when we're onidForbtnbutton when clicked, it will trigger thebtn_click_functionfunction, this function can be an anonymous callback function(if not very understand, please Baidu), or it can be a function written by yourself, called here. As explained here, these functions are passed into aeventThe parameters. This parameter has a number of attributes and involves a thirdfalsearguments, which we discuss later.
For each of these two methods I put an example:

1. Anonymous callback function

var exportbtn = document.getElementById ("Createimagedata"); Exportbtn.addeventlistener ("Click", Function () {//write function code here}, false);

1. Name the callback function yourself

var exportbtn = document.getElementById ("Createimagedata"); Exportbtn.addeventlistener ("click", Createimagedatapressed, false);

Window Event Response

Window event response, is that we listen to the entire window, not limited to buttons and input boxes and so on.
You just need to change the top to btn window either document .

AddEventListener parameter Analysis

addeventlistener (type:string, listener:function, UseCaputer:Boolean (default: False), Priority:int (default:0), Useweakreference:boolean (Default:false));

in AddEventListener the first three parameters are more important, the initial parameter is the event type, such as click or pressdown  pressup and so on, the second parameter is the function executed at the time of the response, and the third is the problem of the event stream. The fourth is the priority, and the fifth is the strong reference or weak reference, if the strong reference is not garbage collected.

The first one has already been said, the second parameter in the previous section has already cited the example, the third parameter here emphatically said: (content more, I first put Baidu's explanation)

This involves the concept of "event flow". Listeners have three stages in listening: The capture phase, the target stage, and the bubbling phase. The order is: the capture phase (the root node to the child node checks whether the listener function is invoked) → The target phase (the target itself) → bubbling phase (the target itself to the root node). The parameters here determine whether the listener runs in the capture phase, the target phase, or the bubbling phase. If Usecapture is set to true, the listener handles events only during the capture phase, not in the target or bubbling phase. If Usecapture is false, the listener handles events only during the target or bubbling phase. To listen for events at all three stages, call two AddEventListener, set Usecapture to True at one time, and set Usecapture to false the second time. (This section is from Baidu).

The capture phase is the transfer process from the outside to the inside of the Web page nesting relationship as described in the first part, and the bubbling phase is the transfer process from the target to the outermost layer, and this parameter tells the listener when the event is triggered.

The next two parameters I do not use much, for the time being not here to write. I'll put it here when I understand it.

HTML learning-JavaScript event monitoring and AddEventListener parameter analysis