美文网首页
面试4:DOM

面试4:DOM

作者: 5d18ee6b5b1c | 来源:发表于2018-12-02 16:58 被阅读0次

    课程思维导图

    DOM.png

    Q:介绍DOM事件级别?

    ```javascript
    // DOM0
    element.onclick = function () {}
    ------------------------------------------
    // DOM2
    element.addEventListener('click', function () {
        //false冒泡阶段,true捕获阶段
    }, false); 
    ------------------------------------------
    // DOM3(增加了事件类型)
    element.addEventListener('keyup', function () {
    
    }, false);
    ```
    

    注:DOM1没注册跟事件相关的东西

    Q:请封装事件监听和解绑的兼容写法?

    ```javascript
    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:如何自定义事件?

    ```javascript
    var event = new Event('custome');
    dom.addEventListener('custome', funcion () {});
    dom.dispatchEvent(event);
    ```
    

    Event 与 CustomEvent唯一区别:CustomEvent除了可指定事件名,还可以跟自定义参数,做指定参数

    相关文章

      网友评论

          本文标题:面试4:DOM

          本文链接:https://www.haomeiwen.com/subject/wgojcqtx.html