DOM

发表于 | 分类于 ，

课程思维导图

DOM

Q：介绍DOM事件级别？

1
2
3
4
5
6
7
8
9
10
11
12
// DOM0
element.onclick = function () {}
------------------------------------------
// DOM2
element.addEventListener('click', function () {
    //false冒泡阶段，true捕获阶段
}, false); 
------------------------------------------
// DOM3(增加了事件类型)
element.addEventListener('keyup', function () {
}, false);

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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：如何自定义事件？

1
2
3
var event = new Event('custome');
dom.addEventListener('custome', funcion () {});
dom.dispatchEvent(event);

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