廢話不多說,直接上面試題,答案請在內容具體講解中查找。
面試題一:事件綁定的函數哪些?他們的區別?
1.事件綁定函數(6種,推薦on事件)
① bind & unbind? ?
?語法:$('.btn').bind('click', fn),不能為動態生成的元素自動綁定事件,3.0之后被棄用。
② one() ? ??
語法:$('.btn').one('click', fn)
③ click()??
?語法:$('.btn').click(fn)
以上三種方法缺點:每一個事件源都要綁定一個元素,綁定過程中只對當前已存在的元素有效??墒褂靡韵路椒ǎ捎妹芭輽C制,進行事件委托。
④ live() & die()? ?
?已廢棄,把選定元素的指定事件委托為document。
⑤ delegate() &undelegate() ?
語法:$('.parent).delegate('.btn', 'click', fn),可以為動態生成的子元素自動綁定事件,3.0之后被棄用。
⑥ on() & off()? ?推薦使用方法
語法:$('.parent').on('click', '.btn', fn) ?jQuery1.7+的方法,推薦使用方法??梢詫崿Fbind()綁定在子元素的效果,也可以做事件委托,語法同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事件。
未完待續....
如果該文對你有用,不要吝嗇你的愛心“?”哦!