前端面試4：DOM

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~

課程思惟導圖

Q：介紹DOM事件級別？

// DOM0
element.onclick = function () {}
------------------------------------------
// DOM2
element.addEventListener('click', function () {
    //false冒泡階段，true捕獲階段
}, false); 
------------------------------------------
// DOM3(增長了事件類型)
element.addEventListener('keyup', function () {

}, false);
複製代碼

注：DOM1沒註冊跟事件相關的東西

Q：請封裝事件監聽和解綁的兼容寫法？

var myEventUtil = {
    addEvent : function (ele,event,func) {
        //用能力檢測進行跨瀏覽器兼容處理
        if(ele.addEventListener) {
            //false表示冒泡事件模型
            ele.addEventListener(event,func,false);
        }else if(ele.attachEvent){
            ele.attachEvent('on'+event,func);
        }else{
            ele['on'+event]=func;
        }
    },
    delEvent : function (ele,event,func) {
        if(ele.removeEventListener){
            ele.removeEventListener(event,func,false);
        }else if(ele.detachEvent){
            ele.detachEvent('on'+event,func);//IE
        }else {
            ele['on'+event]=null;
        }
    }
}
複製代碼

Q：介紹下事件模型？

捕獲、冒泡

Q：介紹下事件流？

1. 定義：用戶與瀏覽器當前頁面的交互過程
2. 三個階段：捕獲階段、目標階段、冒泡階段

Q：DOM事件捕獲的具體流程是怎樣的？

window => document => html => body => ... => 目標元素

Q：Event 對象有哪些經常使用應用？

1. 阻止默認事件：event.preventDefault()
2. 阻止冒泡：event.stopPropagation()
3. 阻止調用相同事件的其餘偵聽器(事件響應優先級)：event.stopImmediatePropagation()
4. 當前綁定事件的元素：event.currentTarget
5. 當前被點擊的元素：event.target

Q：如何自定義事件？

var event = new Event('custome');
dom.addEventListener('custome', funcion () {});
dom.dispatchEvent(event);
複製代碼

Event 與 CustomEvent惟一區別：CustomEvent除了可指定事件名，還能夠跟自定義參數,作指定參數