废话不多说，直接上面试题，答案请在内容具体讲解中查找。
面试题一：事件绑定的函数哪些？他们的区别？
1.事件绑定函数（6种，推荐on事件）
① bind & unbind
语法：$('.btn').bind('click', fn)，不能为动态生成的元素自动绑定事件，3.0之后被弃用。
② one()
语法：$('.btn').one('click', fn)
③ click()
语法：$('.btn').click(fn)
以上三种方法缺点：每一个事件源都要绑定一个元素，绑定过程中只对当前已存在的元素有效。可使用以下方法，采用冒泡机制，进行事件委托。
④ live() & die()
已废弃，把选定元素的指定事件委托为document。
⑤ delegate() &undelegate()
语法：$('.parent).delegate('.btn', 'click', fn)，可以为动态生成的子元素自动绑定事件，3.0之后被弃用。
⑥ on() & off() 推荐使用方法
语法：$('.parent').on('click', '.btn', fn) jQuery1.7+的方法，推荐使用方法。可以实现bind()绑定在子元素的效果，也可以做事件委托，语法同delegate()相同。
⑦ delegate() vs on()
其他废弃事件参考链接jq中文文档
2.浏览器事件
① error(fn)
某一操作出现错误时触发， 1.8版本后被on('error',fn)替代。
② resize()
当window尺寸发生变化时触发，可以被on('error',fn)替代，这个方法经常用作做响应式网站时样式表动态切换或者html切换，具体代码如下：
<script>
changeWidth(); //一进页面先做一次判断
window.onresize = changeWidth;
function changeWidth() {
if(document.documentElement.clientWidth <= 1024){
window.location.href ="mobile.html"
}
}
</script>
也可以使用device.js进行设备判断显示不同的样式表。
③ scroll()
这个方法也经常使用，一般会在制作返回顶部的时候使用，简单代码如下：
$(window).scroll(function(){
var s=$(window).height()
if(s>200){
alert("大于200了")；
//可以添加各种操作
}
});
你也可以看我写的案例：返回顶部的方法
3.文档加载事件
① load() 页面加载完成触发。
② ready() DOM树加载完成触发，两者差异请请参考：jq面试常见问题
③ unload()
当用户离开这个页面时，就会触发window元素上的unload事件。如用户可以点击一个链接，离开页面，或在地址栏输入一个新的URL，前进和后退按钮会触发该事件，关闭浏览器窗口，将导致该事件被触发。即使重新加载页面首先会创建一个unload事件。
未完待续....
如果该文对你有用，不要吝啬你的爱心“❤”哦！
