阅读 724

前端面试4:DOM

这里有一份简洁的前端知识体系等待你查收,看看吧,会有惊喜哦~如果觉得不错,恳求star哈~


课程思维导图

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除了可指定事件名,还可以跟自定义参数,做指定参数

关注下面的标签,发现更多相似文章
评论