JavaScript event Delegate Way binding detailed _javascript tips

JS Event Binding

Event bindings, this uses the principle of bubbling, starting with the clicked element, and recursively propagating events to the parent element, the advantage of which is that for a large number of elements to be processed, you do not have to bind events for each element, and you can improve performance by binding the parent element once. Another benefit is that you can handle the elements that are dynamically inserted into the DOM, and the way you bind directly is not possible.

You've been using the jquery on approach to do something like this, and the other day I saw the source code in the company project that was implemented in this way, and took a closer look at the research and share it with you.

function $bindAction (DOM, event, listeners) {#这里的dom为绑定事件的元素, such as Document.body #event为绑定的事件, such as Click #listeners是待执行的事件对 Like $addEvent (DOM, event, function (e) {#这里获取事件e #获取点击的元素src var e = e | | window.event, src = e.target | | e.srcelement

 , action, ReturnVal; #模拟冒泡的方式, first SRC, then Src.parentnode, then Src.parentNode.parent.Node #当前dom元素等于事件绑定的dom元素的时候, stop "bubbling" while (SRC &
  & SRC!== dom) {#循环获取dom元素的attr-action property, action = Src.getattribute (' attr-action '); #如果当前dom元素存在attr the-action property, and the function that has the value of the property in the event object, executes the function #将事件e, the current DOM element, the attribute attr-action value of the element to the function to be executed if (Listeners[action]) {R
  Eturnval = Listeners[action] ({src:src, e:e, action:action});
  #如果上面的函数执行之后返回false, stop continuing "bubbling" if (ReturnVal = false) {break;
 } #获取当前dom元素的父元素节点 src = src.parentnode;
}
 });

};
 function $addEvent (obj, type, handle) {if (!obj | |!type | |!handle) {return; #绑定事件到多个对象, recursive call if (obj instanceof Array) {for (var i = 0, L = obj.length i < l; i++) {$addEveNT (Obj[i], type, handle);
 } return; #绑定多个事件, recursively calls if (type instanceof Array) {for (var i = 0, L = type.length i < l i++) {$addEvent (obj, type[i),
 handle);
 } return; #下面这一大段用来记录当前页面一共绑定了多少个事件, and related information about the event #以及某个对象上面绑定的事件id window.__allhandlers = Window.__allhandlers | |
 {}; Window.__hcounter = Window.__hcounter | |
 0; function SetHandler (obj, type, handler, wrapper) {obj.__hids = Obj.__hids | |
 [];
 var hid = ' h ' + ++window.__hcounter;
 Obj.__hids.push (HID); Window.__allhandlers[hid] = {type:type, Handler:handler, Wrapper:wrapper}} #这个里面的apply是为了修改绑定事件所执行函数中的th is #这个在低版本的IE中才真正起作用 function createdelegate (handle, context) {return function () {return handle.apply, Argu
 ments);
 };
 #绑定事件, log event binding information if (Window.addeventlistener) {var wrapper = CreateDelegate (handle, obj);
 SetHandler (obj, type, handle, wrapper) Obj.addeventlistener (type, wrapper, false);
 else if (window.attachevent) {var wrapper = CreateDelegate (handle, obj); SeThandler (obj, type, handle, wrapper) obj.attachevent ("on" + type, wrapper);
 else {obj["on" + type] = handle;

 }
};

Look at an example:

When you click the first three of the time will be pop-up classname, the other will not trigger events

<style type= "Text/css" > #out {width:500px;background-color: #CDE} #inner {background-color: #ABCDEF; margin:0;
padding:0;width:400px;} ul{background-color:pink;margin:0;padding:0;width:400px; li{width:398px;height:20px;border:1px solid black;  
margin:15px 0px;padding:0px;list-style:none;} </style> div#out > Div#inner: <div id= "Out" > <ul id= "inner" > <li class= "lia" attr-action= "Setwh At ">class=" Lia "attr-action=" Setwhat "</li> <li class=" lia "attr-action=" Setwhat ">class=" Lia " attr-action= "Setwhat" </li> <li class= "Lib" attr-action= "Setwhat" >class= "Lia" attr-action= "Setwhat" < /li> <li class= "Lib" >class= "Lib" </li> <li class= "Lib" >class= "Lib" </li> <li class= "Lib" >class= "Lib" </li> </ul> </div> ul: <ul> <li class= "lia" attr-action= "Setwhat" >class= "Lia" attr-action= "Setwhat" </li> <li class= "lia" attr-action= "Setwhat" >class= "Lia" attr-action="Setwhat" </li> <li class= "Lib" attr-action= "Setwhat" >class= "Lia" attr-action= "Setwhat" </li> < Li Class= "Lib" >class= "Lib" </li> <li class= "Lib" >class= "Lib" </li> <li class= "Lib" >class= "
 Lib "</li> </ul> <script> listeners = {setwhat:function (opts) {alert (opts.src.className);
 return false;
},
}; Window.onload = function () {$bindAction (document.getElementById (' Out '), [' Click ', ' MouseOver '], listeners);} </

 Script>

The effect is as follows:

Then look at the binding of the event, consistent with our event binding:

The above mentioned is the entire content of this article, I hope you can enjoy.