本文的主要内容是根据最近在某公司面试的一系列访谈，整理出解决问题的方法，并与你分享。

话题本身很简单：在UL中有一千个Li，以及如何将鼠标单击事件绑定到一千李。当单击警报时，李的内容和李的位置坐标是XY。



一
二
三
…
一千




它需要考虑到浏览器的兼容性、事件的泡沫性、效率等问题，当我看到问题时，我在纸上直接写下了下面的答案。




无功ulitem = document.getelementbyid（ulitem ）；
VaR LIS = document.getelementsbytagname（礼）；
对于（var i = 0；i < lis.length；i++）{
LIS {我}。onclick =函数（）{
警报（的内容：+，innerHTML）；
警报（地点+ getelementposition（这）x +。
}
}
功能getelementposition（e）{
var x＝0，y＝0；
（e）！= NULL）{
x = e.offsetleft；
Y = e.offsettop；
E = e.offsetparent；
}返回：x，y，y，}；
}



面试的结果是：在写作和再看之后，没有必要考虑兼容性，而这个事件是冒泡的，从效率的角度考虑，不考虑如何改进，这样面试官就被看到了，面试官也很好。看了看后，他说：你没有考虑我的观点。添加1000次单击事件的效率是非常低的。然后我告诉我利用事件冒泡，这是特点提高效率，事件代理（PS：当我们以前没有遇到过的一个项目，防止气泡沸腾，我们不知道使用事件冒泡的特征。效率听面试官说的姿态，上升回来上网查一下，现在作为一个记录自己的学习是一个学习的过程：

事件代理（事件委托）也称为事件委托，它是一种常见的绑定Javaｓｃｒｉｐｔ中常用事件的技术，顾名思义，事件代理将委托需要绑定到父元素的事件，以允许父代充当事件来监视事件。

你为什么要这么做我们都知道，DOM操作很消耗，所以重复的事件绑定是一个性能杀手。事件代理的核心思想是监测尽可能多的事件可能通过尽可能少的绑定，程序猿，没有代码说个J8，下面的代码：




无功ulitem = document.getelementbyid（ulitem ）；
ulitem.onclick =功能（e）{
E = E | | window.event； / /这条线是兼容IE8以前的版本和线下
VaR目标= e.target e.srcelement | |；
（如果）（target.tagname.tolowercase = Li）{
警报（目标。innerHTML）；
警报（位置：+ getelementposition（目标）。X +
}
}
功能getelementposition（e）{
var x＝0，y＝0；
（e）！= NULL）{
x = e.offsetleft；
Y = e.offsettop；
E = e.offsetparent；
}
返回：x，y，y，y；
}



好了，现在代码去掉了for循环，提高了效率，也有了兼容性方面的过程，觉得答案应该是正确的。以上也是一笔测试，接下来是学术研究的想法，来谈谈事件代理：

在传统的事件处理，您添加或删除每个元素所需的事件处理程序。然而，事件处理器可能会导致内存泄漏或性能退化，你用得越多，越risk.javaｓｃｒｉｐｔ事件代理是一个简单的技巧。您可以添加事件处理程序的父元素通过这样的方式，让你避免将事件处理程序添加到多个子级元素。事件代理使用两个特点，往往在Javasciprt事件忽视：事件冒泡和目标元素。当在元事件被触发，例如，如果鼠标点击按钮，同样的事件会在元素的祖先元素触发。这个过程被称为事件冒泡；这个事件接二连三地从原始元素的DOM树的顶端。任何事件的目标元素是第一要素。在我们的例子中，它是一个按钮，它以属性的形式出现在我们的事件对象中，使用事件代理，我们可以将事件处理程序添加到元素中，等待一个事件从它的子元素中冒泡，我们可以知道哪个元素是从。

关于事件代理，今天也是第一次联系，它是先写到这个的，希望能帮到你学习。