淘宝一面关于JavaScript中的事件代理（例子：ul中无数的li上添加点击事件）

本文主要是介绍淘宝一面关于JavaScript中的事件代理（例子：ul中无数的li上添加点击事件），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文链接 http://www.cnblogs.com/xiaohuihui123/p/4812902.html

面试题：一个ul中有一千个li，如何给这一千个li绑定一个鼠标点击事件，当鼠标点击时alert出这个li的内容和li的位置坐标xy。

看到这个题目，我们一般首先想到的思路是，for循环，遍历1000次。这样的话1000次的循环，效率很低，如何提高。

可以考虑利用事件冒泡特性提高效率。主要是利用事件代理。

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

为什么要这么做？众所周知，DOM操作是十分消耗性能的，所以重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是通过尽量少的绑定，去监听尽量多的事件。

Demo：

test.html：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>hehe</title>
</head>
<body>
<div>
<ul id="ulItem">
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
<li id="li5">5</li>
<li id="li6">6</li>
<li id="li7">7</li>
<li id="li8">8</li>
<li id="li9">9</li>
<li id="li10">10</li>
<li id="li11">11</li>
...
<li id="li1000">1000</li>
</ul>
</div>
<script type="text/javascript">
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};
}
</script>
</body>
</html>