JQ常见面试题之事件详解（1）

废话不多说，直接上面试题，答案请在内容具体讲解中查找。

面试题一：事件绑定的函数哪些？他们的区别？

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事件。

未完待续....

如果该文对你有用，不要吝啬你的爱心“❤”哦！