JavaScript Study Notes (15)_Basic Knowledge

Events
Events are part of the DOM (Document Object Model). Event flow is the order in which events occur. This is the main difference in event support between IE and other browsers.
1. Event flow
1. Bubbling events
The solution on IE is bubbling events. Its basic idea is to go from the most specific target to the least specific The event targets (document objects) are triggered sequentially.
Process: Follow the DOM hierarchy and continue to rise to the top like a bubble. (Trigger the event from the div inside, then to the body, to the html and finally to the top of the document).
2. Capturing events
It can be said that it is the exact opposite of bubbling. Events are triggered from the least accurate object, and then until the most accurate.
3. DOM event flow
DOM supports the above two event models at the same time. The capture event occurs first, starting from the document object and finally ending at the document object.
2. Event listening function
1. IE
Each function and window object has two methods:
attachEvent() method: attach event processing function
[Object].attachEvent("Event name", handler function fnHandler);
This method has two parameters.
var fnClick = function() {
alert("You clicked on the DIV with ID div1");
}
var oDiv = document.getElementById("div1");
oDiv .attachEvent("onclick", fnClick);
Multiple handler functions can be attached.
detachEvent() method: detach and remove the event handler function
2. DOM
addEventListener() method: assign additional event handler function
[Object]. addEventListener ("event name", handler function fnHandler , Boolean);
This method has three parameters ("event name", "assigned function", whether the processing function is in the bubbling phase or the capturing phase)
If the event processing function is used in the capturing phase, the third The first parameter is true, and it is false when used in the bubbling stage.
var fnClick = function() {
alert("Clicked!");
}
var oDiv = document.getElementById("div ");
oDiv.addEventListener("click", fnClick, false);
oDiv.removeEventListener("click", fnClick, false);
You can attach multiple handler functions.
removeEventListener() method: remove event processing function
3. The event object
contains three aspects of information:
1. The object that causes the event: in IE, it is window .event is the only parameter of the processing function in DOM;
2. Mouse information when the event occurs;
3. Keyboard information when the event occurs.
IE event object
In IE, the event object is an attribute event of the window object. That is to say, the event handler function must access the event object like this:
oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}
Although it is a property of the window object, the event object can only be accessed when the event occurs. All event handling functions are destroyed after execution.
DOM standard event object
The event object must be passed to the event processing function as the only parameter. So, to access the event object in DOM-compatible browsers (such as Mozilla, Safari and Opera), do this:
oDiv.onclick = function() {
var oEvent = arguments[0];
}
//You can also do this
oDiv.onclick = function(oEvent) {
//.....
}