"JS Event Details" JS event encapsulation function, JS cross-browser event processing mechanism

I. Flow of events

The event flow describes the order in which events are accepted from the page.
The event stream of IE is the event bubbling stream, and the Netscape event stream is the event capture stream
1. Event bubbling
Event bubbling, that is, the event is initially received by the most specific element (the node with the deepest nesting level in the document) and then relayed up to the least specific node (document).
2. Event Capture
The idea of event capture is that less specific nodes should receive the event earlier, and the most specific node receives the event at the end.

Related knowledge Link: JS event bubbling and event capture

Second, event processing procedures

1. HTML Event handlers
2, DOM0 level Event processing program
3, DOM2 level Event processing program

The DOM2-level event defines two methods: the operation for handling the specified and deleted event handlers: AddEventListener () and RemoveEventListener (). They all receive three parameters: the name of the event to be processed, the function that is the event handler, and a Boolean value.
Related knowledge Link: AddEventListener The third parameter action

4, IE Event processing program
Attachevent () Add Event
DetachEvent () Delete event
Both methods receive the same two parameters: the event handler name and the event handler function
5. Cross-browser event handlers

Third, the event object

Events Object Event
1. Event objects in the DOM
(1), type: Get event Type
(2), Target: Event target
(3), Stoppropagation () block event bubbling
(4), Preventdefault () The default behavior for blocking events
2, the event object in IE
(1), type: Get event Type
(2), srcelement: Event target
(3), cancelbubble=true block event bubbling
(4), returnvalue=false the default behavior of blocking events

JS cross-browser event processing mechanism, the encapsulation code is as follows:

varEventutil = {    //Add HandleAddHandler:function(element, type, handler) {if(Element.addeventlistener) {Element.addeventlistener (type, handler,false); } Else if(element.attachevent) {element.attachevent (' On ' +type, handler); } Else{element[' on ' + type] =handler; }    },    //Delete handleRemoveHandler:function(element, type, handler) {if(Element.removeeventlistener) {Element.removeeventlistener (type, handler,false); } Else if(element.detachevent) {element.detachevent (' On ' +type, handler); } Else{element[' on ' + type] =NULL; }    },    //Get EventGetEvent:function(event) {returnEvent?event:window.event; },    //Get Event TypeGetType:function(event) {returnEvent.type; },    //Get Event SourceGetElement:function(event) {returnEvent.target | |event.srcelement; },    //block default events such as a link jumpPreventdefault:function(event) {if(Event.preventdefault) {event.preventdefault (); } Else{Event.returnvalue=false; }    },    //Block Event bubblingStoppropagation:function(event) {if(event.stoppropagation) {event.stoppropagation (); } Else{event.cancelbubble=true; }    }}

"JS Event Details" JS event encapsulation function, JS cross-browser event processing mechanism