关于JavaScript中的事件代理

　　今天面试某家公司Web前端开发岗位，前面的问题回答的都还算凑活，而且又问了一下昨天面试时作的一道数组去重问题的解题思路（关于数组去重问题，能够观赏我前几天写的：http://www.cnblogs.com/craftsman-gao/p/4766223.html。幸亏前几天专门看过这个问题，答题时才能轻松应对啊），由于这些之前都有过研究，因此回答起来并无太大困难。然而，最后面试官又出了一道代码题让我涨姿式了。题目自己很简单：一个ul中有一千个li，如何给这一千个li绑定一个鼠标点击事件，当鼠标点击时alert出这个li的内容和li的位置坐标xy，

<ul id="ulItem">
    <li id="li1">1</li>
    <li id="li2">2</li>
    <li id="li3">3</li>
    ...
    <li id="li1000">1000</li>
</ul>

须要考虑到浏览器兼容性、事件冒泡、效率等问题。看到问题后我就直接在纸上写下了以下答案：

var ulItem = document.getElementById("ulItem");
var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
    lis[i].onclick = function(){
        alert("内容："+this.innerHTML);
        alert("位置："+getElementPosition(this).x+","+getElementPosition(this).y;
    }
}
function getElementPosition(e){
    var x=0,y=0;
    while(e != null){
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
　　return {x:x, y:y};
}

写完了又看了一遍感受不必考虑兼容性、事件冒泡啊。效率的话，想了想，也想不出怎么提高了，就这样给面试官看了。面试官人也挺好的，他看了以后说：你并无考虑到我说的重点啊，你这样1000次循环添加点击事件效率是很低的。而后就跟我讲了利用事件冒泡的特性，来提升效率，即事件代理（ps：之前作项目有遇到过要阻止事件冒泡的时候，但利用事件冒泡特性提升效率却还彻底不知道）。听了面试官讲的涨了姿式，回来后本身也上网查了一下，如今本身再总结下当作记录本身学习的过程吧：

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中经常使用绑定事件的经常使用技巧。顾名思义，“事件代理”便是把本来须要绑定的事件委托给父元素，让父元素担当事件监听的职务。

为何要这么作？众所周知，DOM操做是十分消耗性能的，因此重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是经过尽可能少的绑定，去监听尽可能多的事件。程序猿的事，没代码说个J8，下面贴出代码：

var ulItem = document.getElementById("ulItem");
ulItem.onclick = function(e){
    e = e || window.event;//这一行和下一行是为了兼容IE8以及以前版本
    var target = e.target || e.srcElement;
    if(target.tagName.toLowerCase() === "li"){
        alert(target.innerHTML);
        alert("位置为："+getElementPosition(target).x+","+getElementPosition(target).y);
    }
}
function getElementPosition(e){
    var x=0,y=0;
    while(e != null){
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
　　return {x:x, y:y};
}

嗯，如今代码去掉了for循环，提升了效率，也有了兼容性方面的处理，感受这个答案应该能够了吧。上面说的也就是为了一道笔试题，下面就再本着学术研究的思想说说事件代理：

　　在传统的事件处理中，你按照须要为每个元素添加或者是删除事件处理器。然而，事件处理器将有可能致使内存泄露或者是性能降低——你用得越多这种风险就越大。JavaScript事件代理则是一种简单的技巧，经过它你能够把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，好比说鼠标点击了一个按钮，一样的事件将会在那个元素的全部祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。任何一个事件的目标元素都是最开始的那个元素，在咱们的这个例子中也就是按钮，而且它在咱们的事件对象中以属性的形式出现。使用事件代理，咱们能够把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，而且能够得知这个事件是从哪一个元素开始的。

　　关于事件代理，今天也是初次接触，就先写到这吧。