前端常见的面试题（七）

1、函数防抖和函数节流

函数防抖：
就是指触发事件后在n秒内函数只能执行一次，如果在n秒内有触发了事件，则会终止前一次，重新计算函数执行时间

函数节流：
就是指限制一个函数在一定时间内只能执行一次

2、什么是事件委托？为什么要用事件委托？

事件委托：
就是利用事件冒泡的原理，让自己所触发的事件，叫他的父元素代替执行

事件委托的使用场景：
比如一堆li，给他们添加点击事件，一个一个添加点击事件肯定不行，所以要给ul加一个点击事件，利用事件源event，就可以获取到每个li的内容

事件委托的优点：
减少内存占用，性能更优，简单方便，动态创建DOM时具有事件

事件冒泡：
先执行子元素的事件，再执行父元素的事件

事件捕获：
先执行父元素的事件，再执行子元素的事件

3、原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){})
有什么不同？

执行时间：
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行，$(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕

编写个数不同：
window.onload不能同时编写多个，如果有多个 window.onload 方法，只会执 行一个 $(document).ready()可以同时编写多个，并且都可以得到执行

简化写法：
window.onload没有简化写法 (document).ready(function())可以简写成 (document).ready(function(){})可以简写成(document).ready(function())可以简写成(function(){})

另外：
由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完，例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，这时候就有可能出现这两天常提的swiper问题

把上图想象成四个大盒子，从上到下依次被套，每个元素都有一个点击事件，点击时就会在控制台显示：我是div/body/document/window其中的一个。
简单理解就是：向上冒泡，向下捕获。