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

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://blog.csdn.net/attilax

--Atiend