JQ常見面試題之事件詳解(1)

廢話不多說,直接上面試題,答案請在內容具體講解中查找。

面試題一:事件綁定的函數哪些?他們的區別?

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

未完待續....

如果該文對你有用,不要吝嗇你的愛心“?”哦!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容