javascript使用事件委托

事件委托是javascript中一个很重要的概念，其基本思路就是利用了事件冒泡的机制，给上级（父级）元素触发事件的dom对象上绑定一个处理函数。在当有需要很多dom对象要绑定事件的情况下，可以使用事件委托。即使是各个dom对象所触发的事件不同的时候，也可以通过事件委托，利用switch语句按需绑定事件，可以帮助我们减少大量的DOM绑定带来的内存开销。

从事件冒泡时开始就发生了事件委托,我们可以直接给父元素绑定事件监听,用来检测在其子元素内发生的事件。这也是类似 SproutCore(http://www.sproutcore.com/)这种框架所使用的技术,用来减少应用中的事件监听的数量 :

list.addEventListener("click", function(e){
    if (e.currentTarget.tagName == "li") {
        /* ... */
        return false;}
}, false);

jQuery 的处理方式更妙,只需给 delegate() 函数传入子元素的选择器、事件类型和回调函数即可。如果使用事件绑定的话,就会给每一个 l i 元素都绑定 click 事件,然而使用 delegate() 方法就能减少这种事件监听的数量,改善代码性能 :

$("ul li").click(function(){ /* ... */ });    // 不要这样做,这样会给每个 li 元素都添加事件监听(非常浪费)

$("ul").delegate("li", "click", /* ... */);   // 这样只会添加一个事件监听

使用事件委托的另一个好处是,所有为元素动态添加的子元素都具有事件监听。因此,在上面的例子中,在页面载入完成后添加的 li 节点同样可以触发点击事件的回调。

转载于:https://www.cnblogs.com/jones-c/p/3696351.html

javascript使用事件委托相关推荐

JavaScript之事件委托（附原生js和jQuery代码）
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
JavaScript用事件委托实现留言板功能
用事件委托实现留言板功能. <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
JavaScript【事件委托实现排他思想】
事件委托实现排他思想: <style>ul {background-color: #ccc;}.active {color: red;}</style> </head&g ...
Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
JavaScript：事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...
javascript和jq的事件委托
2019独角兽企业重金招聘Python工程师标准>>> 今天在公司,有个需求是,通过ajax动态查询数据,回来,再添加到一个ul的li元素中,例如(点击生成 li 模拟,加载数据生成 ...
Javascript事件委托
概念: 事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件冒泡:就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul ...
javascript事件监听与事件委托
事件监听与事件委托在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托 ...
javascript的事件冒泡,阻止事件冒泡和事件委托，事件委托是事件冒泡的一个应用。...
2018年12月13日更新 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...

javascript使用事件委托

javascript使用事件委托相关推荐

最新文章

热门文章