Js事件绑定

事件绑定，它使用冒泡原理将事件从被单击的元素递归地传播到父元素。这样做的好处是，对于大量要处理的元素，不需要为每个元素绑定事件，只需要将它们绑定到它们的父元素一次，从而提高性能。另一个优点是它可以动态处理插入dom的元素，但是直接绑定是不可行的。

我之前一直用jquery的on方法做这样的事情。前几天在公司的项目中看到了实现这个方法的源代码。我会仔细研究并与你分享。

Function $ bindaction (dom，event，listeners) {# DOM这里是绑定事件的元素，例如document.body #event是绑定事件，例如click #listeners是要执行的事件对象$addEvent(dom，event，The function(e){ # get event这里e # get被点击的元素srcvar e=e | | window.event，src=e.target | | e.srcelement，action，returnval#模拟冒泡，首先是src，然后是src.parentNode，然后是src.parentNode.parent.Node #当当前dom元素等于事件绑定的dom元素时，停止“冒泡”while (src src！==dom) {# Loop获取dom元素的attr-action属性，action=src。getattribute(' attr-action ')；#如果attr-action属性存在于当前dom元素中，并且事件对象中存在具有此属性值的函数，则执行此函数#将事件e、当前dom元素和元素属性的attr-action值传递给函数If(listeners[action]){ returnVal=listeners[action]({ src 3360 src，e:e，action3360) #如果上述函数在执行后返回false，则停止“冒泡”If(returnVal===false){ break；}} #获取当前dom元素的父元素节点src=src.parentNode} });};函数$addEvent(obj，类型，句柄){ if(！obj ||！类型||！handle){ return；} #将事件绑定到多个对象，并递归调用if(数组的obj实例){for (var I=0，l=obj.lengthI l；i ) { $addEvent(obj[i]，类型，句柄)；}返回；} #绑定多个事件并递归调用if(数组的类型实例){for (var I=0，l=type.lengthI l；i ) { $addEvent(obj，type[i]，handle)；}返回；} #下面的大部分用来记录有多少事件绑定到当前页面，以及事件的相关信息#和绑定到对象窗口的事件ID。_ _ allhandlers=window。_ _ all handlers | | { }；窗户。__Hcounter=window。_ _ Hcounter | | 0；函数setHandler(obj，类型，处理程序，包装){ obj。__hids=obj。_ _ hids | |[]；var hid='h '窗口。_ _ Hcounter物体。_ _ hids . push(hid)；窗户。_ _ all handlers[hid]={ type : type，handler : handler，Wrapper : wrapper}} #这里的应用是在绑定事件执行的函数中修改this #。这在IE的低版本中确实有效。函数创建委托(句柄，上下文){return function () {return handle。应用(上下文、参数)；};} #绑定事件并记录事件绑定信息if (window。add event listener){ var wrapper=create delegate(handle，obj)；setHandler(obj，type，handle，wrapper)obj . addeventlistener(type，wrapper，false)；} else if(window . attachevent){ var wrapper=create delegate(handle，obj)；setHandler(obj，type，handle，wrapper)obj . attachevent(' on ' type，wrapper)；} else { obj['on' type]=句柄；}};看一个例子：

当你点击前三个，类名会依次弹出，其他事件不会被触发

样式类型=' text/CSS ' # out { width : 500 px；背景-颜色： # CDE } #内部{背景-颜色： # ABCDEF保证金： 0；padd : 0；宽度： 400像素；} ul {背景-颜色：粉色；保证金： 0；padd : 0；宽度： 400像素；} Li { width :398 px h8 : 20 pxborder : 1px纯黑；margin : 15px 0pxpadding : 0pxlist-style :无；}/style div # out div # inner : div id=' out ' ul id=' inner ' Li class=' lia ' attr-action=' set what ' class=' lia ' attr-action=' set what '/Li Li class=' lia ' attr-action=' set what ' class=' lia ' attr-action=' set what '/Li class=' lib ' attr-action=' set what ' class=' lia ' attr-action=' set what '/Li Li class=' lib ' class返回false}，}；窗户。onload=function(){ $ BindAction(文档。GetElementByID(' out ')，['click '，' mouseover']，侦听器)；}/脚本效果如下：

再看看事件的绑定情况，跟我们绑定事件的情况一致：

以上所述就是本文的全部内容了，希望大家能够喜欢。