前端知識彙總 面試用 (二)

2021-06-19 22:06:41 字數 1743 閱讀 5242

1、事件冒泡(ie事件流)

事件開始時由最具體的元素(文件中巢狀層次最深的那個節點)節點,然後逐級向上傳播到較為不具體的節點(文件)。

所有瀏覽器均支援

2、事件捕獲

與冒泡剛好相反,所有瀏覽器均支援,不過不建議使用

3、dom事件流

dom2級事件流規定的事件流包括三個階段:事件捕獲階段、處於目標階段和事件冒泡階段。

ie9及其他非ie核心的瀏覽器均支援,不過在捕獲階段會觸發事件物件上的事件,結果就是有兩個機會在目標物件上操作事件。

1、html事件處理程式(不建議使用)

2、dom0級事件處理程式(冒泡階段被處理,作用域為所屬元素,僅支援乙個)

var btn=document.getelementbyid("mybtn");

btn.οnclick=function();

btn.οnclick=null; //刪除事件處理程式

3、dom2級別事件處理程式(ie9以及其他非ie核心均支援,支援多個事件)

addeventlistener()/removeeventlistener()

所有dom節點都包含這兩個方法,接受三個引數:要處理的事件名、作為事件處理程式的函式、乙個布林值(true在捕獲階段呼叫;false在冒泡階段呼叫);addeventlistener()新增的事件只能使用removeeventlistener()移除,傳入引數需要一致,因此新增的匿名函式無法移除。

var btn=document.getelementbyid("mybtn");

var handler=function()

btn.addeventlistener("click",handler,false);

btn.removeeventlistener("click",handler,false); //有效

4、ie事件處理程式(ie/opera支援、冒泡階段截獲,支援多個事件)

attachevent()/detachevent()

接受兩個引數:事件處理程式名稱與事件處理程式函式

與dom0主要區別在於作用域(this等於window) 

var btn=document.getelementbyid("mybtn");

btn.attachevent("onclick",function());//匿名函式同不能detach

5、跨瀏覽器事件處理程式(冒泡階段捕獲)

存在dom2,則使用該方法;存在ie的方法則採用第二種(注意加上on);最後再使用dom0 

var eventutil=else if(element.attachevent)else=handler;}},

//移除**省略

//下面是如何使用

var btn=document.getelementbyid("mybtn");

var handler=function();

eventutil.addhandler(btn,"click",handler);

1、dom中事件物件(dom0和dom2)

event.type、event.target(事件真正的目標物件)、event.currenttarget(事件註冊的元素物件)

2、ie中事件物件

event.type(同上)、event.secelement(同上中target)   

前端小知識彙總

disabled 超文字傳輸協議 http 的設計目的是保證客戶機與伺服器之間的通訊。http 的工作方式是客戶機與伺服器之間的請求 應答協議。web 瀏覽器可能是客戶端,而計算機上的網路應用程式也可能作為伺服器端。head 與 get 相同,但只返回 http 報頭,不返回文件主體 put 上傳指...

React面試知識彙總

react中keys的作用 keys是乙個標識,用於追蹤哪些列表中元素被修改 被新增或者被移除。render 在開發過程中,我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 react diff 演算法中 react 會借助元素的 key 值來判斷該元素是新近建立的還是被移動而來的元素,...

前端知識筆記彙總200304

css3的一種新的布局模式 主要記錄盒子自身樣式與子元素樣式 屬性名稱 屬性功能 屬性值例子 display 設定彈性盒子型別 flex,inline flex display flex flex direction 設定伸縮盒的起點與終點位置 row,row reverse,column,colu...