Delegate Event Agent

If we used jquery, I believe the delegate method is very impressive, its predecessor is the live method. You can guarantee that a listener event is bound when the node is not present. That may not be quite clear.

First look at the following example:

<ul id= "list" ><li class= "Listener" id= "item1" >liuf</li><li id= "item2" >seven</li>< Li id= "item3" >hehe</li></ul><span style= "font-family:arial, Helvetica, Sans-serif; Background-color:rgb (255, 255, 255); " ></span>

Now we want to give UL each Li binding Click event, the most stupid way is as follows:

The stupidest method Addclickevent ($mi (' #item1 '), Clicklistener), Addclickevent ($mi (' #item2 '), Clicklistener); Addclickevent ($mi (' #item3 '), Clicklistener);

What if there's a lot of Li? Are we bound by one? So there is a second way, is to select all of this tag, with each pass through the history of binding, the code is as follows:

A slightly better approach each ($mini ("#list"). getElementsByTagName (' li '), function (LI) {addclickevent (Li,clicklistener);});

This seems to solve the problem, so what if it appears in a special case? For example, by triggering certain events, an extra Li or some Li is removed, so the above method will fail.

The idea here is that the event bubbles, the mechanism of event bubbling is that the child element responds to the stepfather element, so we can bind the listener event to the parent element, the code is as follows:

A special case function renderlist () {$mi ("#list"). Innerhtml= "<li class= ' listener ' id= ' New_item ' >new item</li> ";} Addclickevent ($mi ("#btn"), renderlist);//You will find that the above method does not work on the newly emerged elements. Therefore, it is necessary to use event bubbling to add the listening addclickevent ($mi ("#list") to its parent element, Clicklistener);

Then there is only one last question, that is, what if I want to respond to an event with a tag in the specified class in UL? If the Unity event is bound on the parent element, then all its child elements will respond, and how can it be filtered?

Here we define a delegate proxy function with the following code:

The event proxy/** @para parentid The ID of the package container @para the selector for the element within the selector container, supports ID and classname @para the function to be executed on the FN element */function Delegat  E (parent, EventType, selector, fn) {//Parameter processing if (typeof parent = = = ' string ') {var parent            = document.getElementById (parent);        !parent && alert (' Parent not found ');        } if (typeof selector!== ' string ') {alert (' selector is not string ');        } if (typeof fn!== ' function ') {alert (' fn is not function '); } function handle (e) {///Get Event object//Standard Dom method event handler The first parameter is the event object//ie can use the global variable Volume window.event var evt = window.event?                    Window.event:e;  Gets the original event source that triggered the event//The standard Dom method is to get the current event source with Target//ie using evt.srcelement to get the event source var target = Evt.target ||                    Evt.srcelement; Gets the event source currently being processed//The standard DOM method is to use Currenttarget to get the current event source//ie in the this pointEvent source currently being processed var currenttarget= e?                    E.currenttarget:this; Under IE 9 window.event and e different evt have no currenttarget attribute, E has currenttarg alert ("src id===" +target.id+ "\n\ncurent Targ            ET id== "+currenttarget.id);            if (target.id = = = Selector | | target.className.indexOf (SELECTOR)! =-1) {Fn.call (target);//Change goal this }} parent[eventtype]=handle;//add listener function for event}

This allows you to respond to the specified child element. Use the following code:

But simply bubbling can only be affected by the default parent element under all child elements, how to specify a fixed element? An agent that listens to an element in the list that specifies class listener to trigger the corresponding event    delegate (' list ', ' onclick ', ' Listener ', function () {        Console.log ( (this);        });

Full code location:

Http://runjs.cn/code/e6z48nm2

Delegate Event Agent