前端面试4：DOM

时间 2019-11-08

标签前端面试 dom 栏目快乐工作繁體版

原文原文链接

这里有一份简洁的前端知识体系等待你查收，看看吧，会有惊喜哦~若是以为不错，恳求star哈~html

课程思惟导图

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：介绍下事件模型？

捕获、冒泡git

Q：介绍下事件流？

定义：用户与浏览器当前页面的交互过程
三个阶段：捕获阶段、目标阶段、冒泡阶段

Q：DOM事件捕获的具体流程是怎样的？

window => document => html => body => ... => 目标元素github

Q：Event 对象有哪些经常使用应用？

阻止默认事件：event.preventDefault()
阻止冒泡：event.stopPropagation()
阻止调用相同事件的其余侦听器(事件响应优先级)：event.stopImmediatePropagation()
当前绑定事件的元素：event.currentTarget
当前被点击的元素：event.target

Q：如何自定义事件？

var event = new Event('custome');
dom.addEventListener('custome', funcion () {});
dom.dispatchEvent(event);
复制代码

Event 与 CustomEvent惟一区别：CustomEvent除了可指定事件名，还能够跟自定义参数,作指定参数浏览器