前端面試4：DOM

明易發表於2018-12-05
前端面試

課程思維導圖

DOM.png

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除了可指定事件名，還可以跟自定義引數,做指定引數

相關文章