Javascript漂流记（上）__事件、异步加载、时间线

版权声明：本文为博主原创，转载请附上博文链接。 https://blog.csdn.net/AquamanTrident/article/details/91346414

一、事件
    1、事件绑定：
         1. elem.onxxx = function(){}，this指向elem，只能绑定一个处理函数，基本等同于写在HTML行间（句柄写法）
         2. elem.addEventListener('事件类型'，处理函数，false)，this指向elem，可绑定多个处理函数
         3. elem.attachEvent('on'+事件类型, 处理函数)，this指向window。（解决方案：外部单独写处理函数，里面的函数体调用真正的处理函数，call的方式），可绑定多个处理函数，而且同一个函数绑定多次可以多次执行。
         经典鄙视题：给li列表循环绑定click事件，输出他们的索引。

[code]        var oLi = document.getElementsByTagName('li');
for(var i = 0; i < oLi.length; i++){
(function(j){
oLi[i].onclick = function(){
console.log(j);
}
}(i))
}

    2、解除事件：
         1. elem.onxxx = null/false，给赋一个空值就完事儿
         2. elem.removeEventListener('事件类型'，同一个函数引用，false)，绑定匿名函数，无法解除
         3. elem.detachEvent('on'+事件类型, 同一个函数引用)

         封装绑定事件函数，兼容所有浏览器

[code]        function addEvent(elem, type, handle){
if(elem.addEventListener){
elem.addEventListener(type, handle, false);
}else if(elem.attachEvent){
elem.attachEvent('on' + type, function(){
handle.call(elem);//解决this指向的问题
})
}else{
elem['on' + type] = handle;
}
}

二、事件处理模型：冒泡、捕获（触发顺序为：首先捕获，然后源元素事件执行，最后冒泡！！)
    1、冒泡：（focus, blur, change, submit, reset, select等事件不冒泡）
         根据结构上（非视觉）嵌套关系：son -> father -> grandfather -> ...  一直往上冒泡
    2、捕获：(IE没有。。)
         和冒泡相反，自父元素捕获至事件源元素，第三个参数填true
       （另一种只有IE能用的捕获：div.setCapture()会把页面上的事件都获取到div身上，div.releaseCapture()释放）
    3、取消冒泡：
         W3C：e.stopPropagation（处理函数上传一个参数e，系统会返回一个事件对象，上面包含这个方法）
         IE&chrome：e.cancelBubble = true
    4、阻止默认事件：（表单提交页面刷新，a标签跳转，右键菜单等）
          return false，只对句柄方式绑定的事件（elem.onxxx = function(){}）有效
          e.preventDefault()，（a链接的href里面写javascript:void(false)也可以取消a链接默认事件）
          e.returnValue = false，兼容IE
    5、事件对象：e || window.event
    6、事件源对象：event.target || event.srcElement
    7、事件委托：根据冒泡，直接都交给上层处理

          练习：实现一个拖拽函数

[code]        function drag(elem){
var elem = document.querySelector(elem);
var disX,
disY;
elem.addEventListener('mousedown',function(e){
var event = e || window.event;
disX = e.clientX - elem.offsetLeft;
disY = e.clientY - elem.offsetTop;
document.addEventListener('mousemove',handle, false)
elem.addEventListener('mouseup', function(){
document.removeEventListener('mousemove',handle, false)
}, false)
}, false)
function handle(e){
var event = e || window.event;
elem.style.left = e.clientX - disX + 'px';
elem.style.top = e.clientY - disY + 'px';
}
}

三、事件类型
    1、鼠标类事件：
         1. 需知click只监听左键；up、down区分鼠标左右键；
         2. 事件对象上有button属性，0、1、2分别代表左、中、右；
         3. 在移动端移动端down、up、click等失效。用touchstart、touchmove、touchend代替
    2、键盘类事件：
         1. down、press(会连续触发，比如游戏的前进后退键。down监测所有按键，press监测字符类按键返回ASCII码)、up
         2. String.fromCharCode(unicode码) ，返回字符
    3、文本操作事件：
         1. input：文本但凡变化就触发
         2. change：聚焦和失焦两个状态是否有改变
         3. focus：聚焦
         4. blur：失焦

          完善一个input框

[code]<input type="text" name="username" style="color: #999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">

    4、窗体类事件：
         1. window.scroll（ie6没有fixed定位，用position:absolute模拟，top = 原top+滚动条的位置）
         2. load（xxx.onload，慢！！！renderTree构建完毕，所有资源加载完成，onload才会执行）
四、关于异步加载：（js会阻塞文档，加载工具方法的js没必要阻塞文档）
         1. domTree，构建时深度优先，domTree构建完成代表所有dom节点解析完毕
         2. cssTree，构建时深度优先
         3. domTree + cssTree = renderTree（渲染引擎开始绘制页面）
            一些操作会引起reflow重排，比如dom节点的删除、添加、宽高，位置变化、offsetWidth、offsetLeft
            还有一些操作会引起repaint重绘，危害略小于重排

    1、异步加载的几种方法：
         1. defer：只有IE能用，<script type="text/javascript" src="" defer="defer"></script>等到dom文档解析完才会被执行
         2. async：<script type="text/javascript" src="" async="async"></script>加载完就执行，只能加载外部脚本
         3. 按需加载

    2、js加载时间线（非常重要）
        创建document对象，开始解析web页面。document.readyState = 'loading'
        遇到link外部css，异步加载
        遇到script外部js，未设置异步的，阻塞文档
        遇到script外部js，设置异步的，异步加载（禁止使用document.write，他能把之前的文档流清空）
        遇到img，正常解析dom，异步加载src
        文档解析完成（domTree完成），document.readyState = 'interactive'
        文档解析完成，设置defer的脚本执行
        文档解析完成，document对象触发DOMContentLoaded(只能用addEventListener绑定，jq的$(document).ready就是这个时候)，浏览器转为事件驱动
        整个页面加载完毕，document.readState="complete"，即window.onload

以上内容属二哥原创，整理自 "渡一教育Javascript课程" ，一个值得推荐的"渡一教育"。