标签：font opp efault 过程 class add top timeout onclick
1、DOM中的事件级别
DOM0: element.onclick = function(){}
DOM1: 没有与事件相关的设计
DOM2: element.addEventListener(‘click‘,function(){},false/true);冒泡/捕获，默认冒泡
DOM3：element.addEventListener(‘keyup‘,function(){},false/true);多事件类型
2、DOM事件模型：捕获 冒泡
3、事件流
阶段一：捕获阶段
阶段二：目标阶段
阶段三：冒泡阶段
4、描述DOM事件具体流程
捕获：window document HTML body div ... 目标元素
冒泡：相反
1 // 捕获 过程，冒泡把true改成false 2 var ev = document.getElementById(‘ev‘); 3 window.addEventListener(‘click‘, function() { 4 console.log("window capture"); 5 }, true); 6 document.addEventListener(‘click‘, function() { 7 console.log("document capture"); 8 }, true); 9 document.documentElement.addEventListener(‘click‘, function() { 10 console.log("html capture"); 11 }, true); 12 document.body.addEventListener(‘click‘, function() { 13 console.log("body capture"); 14 }, true); 15 ev.addEventListener(‘click‘, function() { 16 console.log("ev capture"); 17 }, true);
注意：获取html标签是：document.documentElement
5、event对象的常见应用
1 event.preventDefault();//阻止默认事件
2 event.stopPropagation();//阻止事件冒泡
3 event.stopImmediatePropagation();//事件响应优先级
4 event.currentTarget();//当前所绑定的事件的对象
5 event.target();//事件委托，判断哪个被绑定
6、自定义事件
1 // 自定义事件
2 var eve = new Event(‘test‘);
3 ev.addEventListener(‘test‘, function() {
4 console.log("test dispatch");
5 });
6 setTimeout(function() {
7 ev.dispatchEvent(eve);
8 }, 2000)
标签：font opp efault 过程 class add top timeout onclick
原文地址：https://www.cnblogs.com/bestchenyan/p/9696778.html
