Atitit事件代理机制原理 基于css class的事件代理

1.1. 在javasript中delegate这个词经常出现，看字面的意思，代理、委托1

1.2. 事件代理1

1.3. 代理标准化规范1

1.3.1. jQuery和Dojo中delegate函数2

1.3.2. 优点2

1.1. 在javasript中delegate这个词经常出现，看字面的意思，代理、委托

如果我们不想或不能够直接操纵目标对象，我们可以利用delegate创建一个代理对象来调用目标对象的方法，从而达到操纵目标对象的目的。代理对象要拥有目标对象的引用。这就是事件代理(也就是说不会直接去操纵对象)

注册事件：：绑定    cls:cls_left >>fun

执行事件，遍历obj class name,for exe cls fun..

1.2. 事件代理

首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制

1.3. 代理标准化规范

// 获取父节点，并为它添加一个click事件

document.getElementById("parent-list").addEventListener("click",function(e) {

  // 检查事件源e.targe是否为Li

  if(e.target && e.target.nodeName.toUpperCase == "LI") {

    // 真正的处理过程在这里

    console.log("List item ",e.target.id.replace("post-")," was clicked!");

  }

});

1.3.1. jQuery和Dojo中delegate函数

下面看一下Dojo和jQuery中提供的事件代理接口的使用方法。

首先是jQuery：

$("#link-list").delegate("a", "click", function(){

  // "$(this)" is the node that was clicked

  console.log("you clicked a link!",$(this));

});

jQuery的delegate的方法需要三个参数，一个选择器，一个时间名称，和事件处理函数。

1.3.2. 优点

通过上面的介绍，大家应该能够体会到使用事件委托对于web应用程序带来的几个优点：

1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。

2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。

3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。

JavaScript事件代理和委托（Delegation） - majian_1987的专栏 - 博客频道 - CSDN.NET.html

作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher

捕鸟王"Bird Catcher 王中之王King of Kings 虔诚者Pious 宗教信仰捍卫者 Defender of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak

简称：： Emir Attilax Akbar 埃米尔 阿提拉克斯 阿克巴

全名：：Emir Attilax Akbar bin Mahmud bin  attila bin Solomon Al Rapanui 

埃米尔 阿提拉克斯 阿克巴 本 马哈茂德 本 阿提拉 本 所罗门  阿尔 拉帕努伊   

常用名：艾提拉（艾龙），   EMAIL:1466519819@qq.com

转载请注明来源：attilax的专栏   http://www.cnblogs.com/attilax/

--Atiend

Atitit事件代理机制原理 基于css class的事件代理