JavaScript series (iii) events

1 Event Stream

Event bubbling: When an element receives an event, it propagates everything he receives to his parent, all the time, to the window. Block bubbling: Call Event.canclebubble=true in the event function that is currently blocking bubbling; In modern browsers, the event bubbling mechanism is used by default, so few people use event capture because older versions do not support event capture. It is therefore recommended to use event bubbling.

2 Event handlers

In the DOM, the operation that handles handlers for the specified and deleted events: AddEventListener () and RemoveEventListener (). In both methods, receive three parameters: the event name to process, the event handler function, Choose which stage to invoke the event handler. The third parameter, if true, indicates that the event handler is called during the capture phase, which is flase, which indicates that the event handler is called during the bubbling phase. If more than one event handler is added for the same element, it is triggered in the order in which it was added.

In both methods, it is relative, that the event processing added by the first method must be lifted by the second method, and note that when removing, the function that is passed in must be the same as the function passed in when it is added, which also means that if you add an anonymous function to the Add method, it will be difficult to remove. (Ie9,firefox,safari,chrome and Opera support DOM2-level event handlers)

　　In IE, there are the corresponding attachevent () and DetachEvent (), and note the receive in both methods: event handler name and event handler function. At the same time, due to the particularity of IE, it is generally added by default to the bubbling stage to invoke the event handler function. NoteIf you add more than one event handler for the same element, it is triggered in the reverse order. Note: Browsers that support IE event handlers are only ie and opera.

　　To handle events in a cross-browser manner, use an object called Eventutil.

varEventutil ={addHandler:function(element, type, handle) {if(Element.addeventlistener) {Element.addeventlistener (type, handle,false)            } Else if(element.attchevent) {element.attachevent ("On" +Type , handle)//In order to run in IE8 and earlier versions, the event type is prefixed with an "on". } Else{element["On" + type] =handle;         This method is the method used by DOM0 and is generally not executed. }}, RemoveHandler:function(element, type, handle) {if(Element.removeeventlistener) {Element.removeeventlistener (type, handle,false)            } Else if(element.detachevent) {element.attachevent ("On" +type, handle)} Else{element["On" + type] =NULL; }        }    }

3 Event Object

This content is not familiar, skip first.

4 Event Types

The content is too complex to skip first.

5 Memory and performance

Because each function is an object, it consumes memory, and if there are too many objects, the performance becomes worse. One of the reasons for the poor performance is that there are too many event handlers, so the event delegation mechanism is generated.

The event delegation mechanism takes advantage of event bubbling, specifying only one event handler to manage all events of a certain type. Take the following example:

 //This is the traditional practice 
 var  item1 = document.getElementById (' gosome ' ); var  item2 = document.getElementById (' dosome ' );     var  item3 = document.getElementById (' sayhi ' ); Eventutil.addhandler (item1,  ' click ', function      (E) {location.href  = ' http://www.weibo.com ' ; }) Eventutil.addhandler (item2,  ' click ', function   (E) {document.title  = ' I changed the title ' ;}) Eventutil.addhandler (item3,  ' click ', function   (E) {alert ( ' Hi '  
  

This is the practice under the event delegation mechanism
varEventutil ={addHandler: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; }}, RemoveHandler: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; }}, GetEvent:function(event) {returnEvent?event:window.event; }, Gettarget:function(event) {returnEvent.target | |event.srcelement; }, Preventdefault:function(event) {if(Event.preventdefault) {event.preventdefault (); } Else{Event.returnvalue=false; }}, Stoppropagation:function(event) {if(event.stoppropagation) {event.stoppropagation (); } Else{event.cancelbubbles=true; }}, Getrelatedtarget:function(event) {if(Event.relatedtarger) {returnEvent.relatedtarget; } Else if(event.toelement) {returnevent.toelement; } Else if(event.fromelement) {returnevent.fromelement; } Else{return NULL; } }};varList = document.getElementById (' mylinks '); Eventutil.addhandler (list,' Click ',function(e) {event=eventutil.getevent (e); vartarget =Eventutil.gettarget (event); Switch(target.id) { Case"Gosome": location.href = ' http://www.weibo.com '; Break;  Case"Dosome": Document.title = ' I changed the title '; Break;  Case"Sayhi": Alert (' Hi '); Break; }        });

In the previous code, just add a click event for the UL element. Under the UL element Li, it will bubble, so Li's click will be handled by this function. Because it takes only one DOM element, it consumes less memory and all events that use the button are appropriate for the event delegation technique.

There are several advantages to the new approach and the traditional approach:

(1) The Document object can be accessed quickly. You can also add event handlers at any point in the page life cycle (no domcontentloaded or load events are required). That is, if you can click on the element to render on the page, you can have the corresponding function.

(2) Less time is required to set up event handlers on the page.

(3) Improve overall performance.

The things you can do with event delegation technology include Click, MouseDown, MouseUp, KeyDown, KeyUp, and KeyPress. Although the mouseover and Mouseout events also bubble, it is often not recommended to calculate the location of their elements.

To improve overall performance, you can also remove event handlers when you don't need them, in addition to using the event delegation mechanism.

The set of methods is still not familiar, and then skipped.

6 Simulation Events

　　

　

JavaScript series (iii) events