事件委托 documentFragment

如果有一个列表页，页面结构是外面一个BODY， 里面有一万个子DIV，每个DIV里面有一些文字，这些文字都不相同。需求是，点击一个DIV，要求弹个alert框，将DIV里的文字显示出来。你会怎么做。

30%的人会用JQuery来绑事件，认为看着简洁，应该效率高，如：$("body>div").click(……)  ，有20%的人会写原生的语句来遍历，给每个DIV添加点击事件，有10%的人回答，在页面滚动时，存下页面滚动的高度，在点击时，获取触发点在屏幕的Y坐标，将Y的坐标和页面滚动的高度相加，然后除以每个DIV的高度，就知道点了第几个元素，再将这个元素的内容弹出来。（或其它类似的做法）

回答出以上答案的面试者在这题会被扣分，正确答案是，只用给外面的元素（本题是BODY）添加点击事件，在点击时，可以获取到引发点击事件的源元素（如某DIV），将这个元素的文本内容弹出来即可。

 

documentFragment

"一个列表页，需要你往里面插入一千个DOM，你怎么做？" 

很多时候，你往页面中加一个DOM，就会引起页面的重构。如果你使用遍历来逐一添加，每添加一次，页面都会重新渲染一次，这种做法会带来性能的下降。好的方式是把要添加的元素先缓存起来， 要添加时一次性添加。一般会使用documentFragment来进行缓存，还有些使用长的字符串（HTML代码串）来缓存。