The three phases of JS events, the principle of event delegation

The three phases of the event stream specified by the DOM2 event : Capture, Target, bubbling (IE8 and earlier versions do not support DOM event streams);

Event Flow: IE:The IE Event Stream is the event bubbling stream NetscapeEvent flow is the event capture stream IE Event FlowCalled event bubbling, where the event starts with the most specific element (the node that is the deepest nested in the document) and then goes up (up to the document). Event captures are the exact opposite of the event bubbling event flow, which is the outermost step-by-step propagation of event streams.

Use events specified by the DOM0-level methodA handler is considered a method of an element, the handler is in the scope of the element, and the program is referencing the current element.

Btn

var btn = document.getelementbyid_x_x_x ("btn"); Btn.onclick = function () {alert (this.id);//Popup BTN}

After clicking on the element btn, the property ID of the element is obtained through this.id, and any property and methods of the element can also be accessed through this method, in which case handlers are processed in the bubbling phase of the event stream.

You can also delete an event handler that is specified by the DOM0-level method, as long as the property value of the event handler is set to NULL.

Btn.onclick = null; Delete event handlers;

DOM2 Level Event handlers

Events are triggered during the bubbling phase, and as with the DOM0-level method, the event handlers added here are also run in their dependent element scope, and the benefit of adding event handlers using the DOM2 level is that you can add multiple event handlers, such as the following code:

var btn = document.getelementbyid_x_x_x ("btn"); Btn.addeventlistener (' click ', Function (e) {alert (this.id);},false); Btn.addeventlistener (' click ', Function (e) {alert ("I am coming to test");},false);

The above code is popped up 2 times, and at the DOM0 level it is not possible; it is always executed last.

Reference: http://www.admin10000.com/document/6293.html

The program of IE event processing

Btn.attachevent (' onclick ', handler); function Handler (e) {alert (this);//Window}

Note: The event name of the attachevent is the onclick, and the AddEventListener event name is click, and the main difference between the attachevent () used in IE and the DOM0-level method is the scope of the event handler, With the DOM0 level, the event handler runs within the scope of the element to which it belongs, and in the case of the Attachevent () method, the event handler runs under the global scope, where this is equal to window.

Understand event objects under the standard browser and the event objects under IE

The event objects under the standard browser are events, such as BTN after a click, the following code:

var btn = document.getelementbyid_x_x_x ("btn"); Btn.onclick = function () {Console.log (event),///standard browser to print Events Object Console.log (Event.type);//' click '} btn.onclick = function () {//IE Print Event object window.event console.log (window.event); Console.log (window.event.type);//' Click '}

The above notation is to register the event at the DOM0 level, if we register the event at the Dom2 level, then there will be an event object that is passed as a parameter to the function, as follows:

var btn = document.getelementbyid_x_x_x ("btn"); Eventutil.addhandler (BTN, ' click ', Function (e) {console.log (e);});

Understanding default behavior events for specific events under standard browser

Alink.onclick = function (e) {Console.log (E) E.preventdefault ();}

IE under

Alink.onclick = function () {Console.log (window.event) Window.event.returnValue = false;}

The difference between a standard browser and an event target under IE

Console.log (Event.target); Print Event Target Element

Console.log (window.event.srcElement);

Understand the difference between a standard browser and a block event propagation under IE

Under standard browsers we can use the Stoppropagation () method to stop the propagation of events in the DOM hierarchy, that is, to cancel bubbling or capturing in an event. To avoid triggering event handlers that are registered on Document.body

Standard browser e.stoppropagation ()

IE:window.event.cancelBubble = True

Cross-browser Event objects

var eventutil = {

   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) {

         Return event? Event:window.event;

},

   Gettarget:function (event) {

                return Event.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.cancelbubble = true;

           }

    }

};

Understanding customer Area Coordinate locations

The meaning is: the mouse pointer in the visual area of the horizontal clientx and vertical clienty coordinates;

As shown in the following:

　　

Understanding page Coordinate Locations Pagex and Pagey:

Pagex and Pagey refer to the location of page coordinates, and the difference between Clientx and Clienty is that it contains the position of the page scroll bar, as shown in:

　　

However, IE8 and earlier versions do not support Pagex and Pagey

Eventutil.addhandler (BTN, ' click ', Function (e) {e = Eventutil.getevent (e); var PageX = E.pagex, pagey = E.pagey; if (!pagex)  {PageX = E.clientx + (Document.body.scrollLeft | | document.documentElement.scrollLeft);} if (!pagey) {pagey = E.clienty + (Document.body.scrollTop | | document.documentElement.scrollTop); } console.log ("page x axis coordinates:" +pagex + "+" page y-axis coordinates are: "+pagey);});

Understanding the location of screen coordinates

The screen horizontal Screenx and vertical coordinates screeny properties are relative to the entire screen. As shown in the following:

The principle of JavaScript event delegation

principle: Using Event delegation technology allows you to avoid adding event listeners to a particular node, instead, event listeners are added to their parent elements, using the bubbling principle to add events to the parent, triggering the effect of execution.

eg

<</span>ul id= "Parent-list" >  <</span>li id= "post-1" >item 1</</span>li>  <</span>li id= "post-2" >item 2</</span>li>  <</span>li id= "post-3" > Item 3</</span>li>  <</span>li id= "post-4" >item 4</</span>li>  << /span>li id= "post-5" >item 5</</span>li>  <</span>li id= "post-6" >item 6</</ Span>li></</span>ul>

function Geteventtarget (e) {
E = e | | window.event;
return E.target | | E.srcelement;
}

Gets the parent node and adds a click event document.getelementbyid_x ("Parent-list") to it. AddEventListener ("click", Function (e) {  // Check if event source E.targe is Li

var target = Geteventtarget (e);
  if (target && target. nodename.touppercase = = "LI") {
    The real processing process here    console.log ("List item", E.target.id.replace ("post-"), "was clicked!");  });

Advantages

With the introduction above, you should be able to appreciate several advantages of using event delegation for Web applications:
1. Can save a lot of memory consumption, reduce event registration.
2. You can easily add and modify elements dynamically, without modifying the event bindings because of changes to the elements.
There is less association between 3.JAVASCRIPT and DOM nodes, which reduces the probability of a memory leak due to circular references.
Disadvantages:
Not all events can bubble. Blur, focus, load, and unload cannot bubble like any other event. In fact blur and focus can be obtained using event capture rather than event bubbling (in browsers other than IE).
There are some things to be aware of when managing mouse events. If your code handles MouseMove events, you risk a performance bottleneck because the MouseMove event triggers very often. Mouseout, however, becomes difficult to manage with event proxies because of its bizarre behavior.
Reference:http://www.cnblogs.com/silence516/archive/2009/09/03/delegateEvent.html

The three phases of JS events, the principle of event delegation