今天的码农女孩做了关于DOM事件流的笔记 2022/1/16

DOM事件流
包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段、
执行顺序：首先发生事件捕获，为事件提供机会，然后是事件的目标阶段进行接收事件，最后执行冒泡阶段
document->html->body->div->h1->div->body->html->document
事件下的属性和方法
1.altKey 返回当事件被触发时，"ALT" 是否被按下。 
2.button 返回当事件被触发时，哪个鼠标按钮被点击。
               0左键 1中间键 2右键
3.clientX 返回当事件被触发时，鼠标指针的水平坐标。(可视化body) 
4.clientY 返回当事件被触发时，鼠标指针的垂直坐标。
5.ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。 
6.relatedTarget 返回与事件的目标节点相关的节点。 
7.screenX 返回当某个事件被触发时，鼠标指针的水平坐标。(浏览器)
8.screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
9.shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
10.cancelBubble 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 
11.keyCode 对于 keypress 事件返回Unicode 字符码。keydown 和 keyup 事件返回虚拟键盘码。
12.returnValue 把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。 
13.bubbles 返回布尔值，指示事件是否是起泡事件类型。
14.cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。 
15.currentTarget 返回其事件监听器触发该事件的元素。     
16.target 返回触发此事件的元素（事件的目标节点）。
17.type 返回当前 Event 对象表示的事件的名称。 
18.preventDefault() 通知浏览器不要执行与事件关联的默认动作。
19.stopPropagation() 不再派发事件。 
阻止冒泡的方法有哪些：
1. if(v==e.target){console.log(v);}//适应所有浏览器
2.console.log(v);
  e.cancelBubble=true;//支持IE低版本
3.e.stopPropagation()//支持高版本浏览器
阻止默认行为的方法有哪些：
1.return false适应所有浏览器
2.e.returnValue=false适应所有浏览器
3.e.preventDefault();支持高版本浏览器
绑定事件
事件委托：又叫事件代理，在js中用绑定事件的技巧，把原本需要绑定在子元素的事件，委托给父类元素，让父类元素担当事件监听任务，原理就是事件冒泡
高版本浏览器事件绑定
标签.addEventListener(事件，函数，布尔值)绑定事件，布尔值为true处理捕获,false表示冒泡
标签.removeEventListener(事件，函数，布尔值)删除事件
IE的事件绑定
标签.attachEvent(事件，函数)绑定事件
标签.detachEvent(事件，函数)删除事件
注意：addEventListener执行click, attachEvent执行onclick
绑定事件兼容性封装：
   var bindfun={
            add:function(obj,type,fun,bool){
                if(obj.addEventListener){
                    obj.addEventListener(type,fun,bool)
                }
                else{
                    obj.attachEvent("on"+type,fun)
                }
            },
            remove:function(obj,type,fun,bool){
                if(obj.removeEventListener){
                    obj.removeEventListener(type,fun,bool)
                }
                else{
                    obj.detachEvent("on"+type,fun)
                }
            }
        }
        function foo(){
            alert("封装的绑定事件执行了")
            bindfun.remove(div,"click",foo,false)
        }
        bindfun.add(div,"click",foo,false);
事件委托
        document.addEventListener("click",function(ev){
            var e=event||ev
            switch(e.target.classList.toString()){
                case 'list1':e.target.style.background="red";break;
                case 'list2':e.target.style.background="pink";break;
                case 'list3':e.target.style.background="green";break;
                case 'list4':e.target.style.background="blue";break;
            }
        },false)
事件动画
通过周期函数和延迟函数做动画，注意：
1.要判断结束位置，否则用于无法停止
2.考虑计算的数字和结束位置是否一致，达到位置重合
3.动画想要平滑执行，需要计算速率
例子：
标签移动动画
    div.οnclick=function(){
            var t=setInterval(function(){
                var l=div.offLeft
                var speed=(800-l)/13
                if(l>=800-10){
                    clearInterval(t)
                    div.style.left="800px"
                }
                else{
                    div.style.left=(l+speed)+"px"
                }
            },30)
        }
异常
常用错误
Error常规错误
ReferenceError引用错误
SyntaxError语法错误
TypeError类型错误
RangeError范围错误
EvalError eval()函数发生异常
URLError路径错误
注意：js里出现了异常，则程序会被终止，后面的语句不会被执行
处理异常：
try{
   出现异常的语句
   }
catch(异常）{
   处理异常的语句
 }
finally{
   无论是否发生异常，finally都执行
  }
例如：
   try{
            console.log(b);
        }
        catch(ReferenceError){
            console.log("这个变量没定义");
        }
        finally{
            console.log("一直都执行");
        }
抛出异常：
throw"错误提示语"
注意：throw后面可以放字符串，数字，布尔和对象，可以用throw抛出js语法的非异常语句
例如：
  if(num2==0){
            throw Error("除数不能为0")
        }
         console.log(num1/num2);
延迟脚本和异步脚本
外部引入js
<script src="js/test.js"></script>
同步和异步
同步：在主线程上排队执行任务，只有前一个任务执行完毕，才能执行下一个任务
异步：不进入主线程，开启异步任务队列，主线任务和异步可以同时执行
延迟脚本和异步脚本区别：
延迟脚本(defer)在脚步下载时，不会影响页面构造，在执行时，会在页面加载完成之后执行，所以叫做立即下载，延迟执行。当同时出现多个defer加载js时，会被按照顺序进行下载
异步脚本(async)在脚本下载时，不会影响页面构造，但是在执行时，会阻塞页面渲染，所以此时最好不要操作DOM,叫做立即下载，异步执行，当同时出现多个async加载js时，不能保证加载时的先后顺序
例如：
<script src="js/work53.js" defer></script>