JavaScript事件委托技术实例分析
本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下：
如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了.
首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差.
其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的.
事件委托：
对事件处理程序过多的问题解决的方案就是事件委托技术.
事件委托技术利用了事件冒泡.只需指定一个事件处理程序.
我们可以为某个需要触发事件的父元素来绑定事件处理程序.
<ul id="mylist"> <li id="li_1">sdsdsd</li> <li id="li_2">sdsdsd</li> <li id="li_3">sdsdsd</li> </ul>
现在我们要为这3个li绑定事件处理程序..
只需要在ul绑定事件处理程序.
obj.eventHandler($("mylist"),"click",function(e){
e = e || window.event;
switch(e.target.id){
//大家应该还记得target是事件目标,
//只要点击了事件的目标元素就会弹出相应的alert.
case "li_1":
alert("li_1");
break;
case "li_2":
alert("li_2");
break;
case "li_3":
alert("li_3");
break
}
})
如果在一个复杂的web应用程序中,.这种事件委托是非常实用的.
如果不采用这种方式的话,一个一个去绑定那就是数不清的事件处理程序.
希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍JavaScript的事件代理和委托实例分析，包括了JavaScript的事件代理和委托实例分析的使用技巧和注意事项，需要的朋友参考一下 在JavaScript中，经常会碰到要监听列表中多项li的情形，假设我们有一个列表如下： 如果我们要实现以下功能：当鼠标点击某一li时，alert输出该li的内容，我们通常的写法是这样的： 当列表项比较少时，直接给每个li添加onclick事件 列
-
本文向大家介绍jQuery的事件委托实例分析，包括了jQuery的事件委托实例分析的使用技巧和注意事项，需要的朋友参考一下 事件委托主要是利用事件冒泡现象来实现的，对于事件委托的精准的掌握，可以有利于提高代码的执行效率。先看一段代码实例: 在以上代码中，使用bind()方法为每一个td绑定了一个click事件处理函数，这样当点击单元格的时候，就会重新设置单元格中的文本。虽然此中方式实现了需要的效果
-
主要内容：为什么要使用事件委托,事件委托实现原理,事件委托的优点,总结利用 JS 事件冒泡动态为元素绑定事件的方法称为事件委托（Event Delegation，也称为“事件代理”），是 JavaScript 中最热门的技术之一。 事件委托就是把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素。 举个简单的例子，整个宿舍的同学都需要去取快递，一种方法是让他们
-
本文向大家介绍javascript事件监听与事件委托实例详解，包括了javascript事件监听与事件委托实例详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript事件监听与事件委托。分享给大家供大家参考，具体如下： 事件监听与事件委托 在js中，常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时，这种方式
-
实现on,off的事件委托! 我们能根据之前的思路,利用同样的方法实现一个事件委托. 先来看看流程图 然后先看看结果是如何，毕竟流程图看的也不一定能懂。 最后我们再来看看代码 Kodo.deleEvents = []; //事件委托存放的事件 Kodo.deleId = 0; //事件委托的唯一标识 on: function(type, selector, fn) { if (typeo
-
捕获和冒泡允许我们实现一种被称为 事件委托 的强大的事件处理模式。 这个想法是，如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。 在处理程序中，我们获取 event.target 以查看事件实际发生的位置并进行处理。 让我们看一个示例 —— 反映中国古代哲学的 八卦图。 如下所示：在新窗口中打开 在沙箱中打开 其 HTML 如