例题：事件捕获，用于解决拖拽，鼠标容易出了div这种麻烦事，用于解决鼠标帧频比事件监听帧频要快的麻烦事，就像刚才鼠标挪出去之后拿document解决的
也可以不这么解决还有一种方法也叫事件捕获，仅在ie中好用，div.setCapture(),用完这个方法之后，div会捕获页面上发生的所有的事件硬捕获到自己的身上，这个方法会将任何地方发生的任何事件发生在自己身上
用完了就赶快释放div.releaseCapture()

111.事件分类（在写事件的时候根本没有小驼峰式大驼峰式，只有罗列出来就行）
1.鼠标事件（click = on + down）
click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、 mouseenter mouseleave
例1：click、mousedown、mouseup
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function(){
        console.log('click');
    }
    div.onmousedown = function(){
        console.log('onmousedown');
    }13:31 2018/9/9
    div.onmouseup = function(){
        console.log('onmouseup');
    }
//点击div 顺序 ：down up click 和事件的绑定顺序无关
例2：contextmenu，右键菜单事件，唯一的用处就是右键取消菜单事件，不用它来监听事件
例3：mouseover，mouseout，mouseenter，mouseleave
下例，原本div是红色的，利用over和out，当鼠标挪进div后，颜色变为粉色，挪出后，颜色变为黑色，同理html5中的enter和leave和那两个一样。
    <div style="height:200px;width:200px;background-color:red;position:absolute;left:0;top:0">
    var div = document.getElementsByTagName('div')[0];
    div.onmouseover = function(){
        div.style.background = "pink";
    }
    div.onmouseout = function(){
        div.style.background = "black";
    }
2.
（1）用button来区分鼠标的按键，0/1/2
（2） DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键
（3）能区分左右键的只有两个事件mouseup和mousedown，其他的事件像click什么的都不可能
例1：事件e中的button属性记录着鼠标点的是左键还是右键，左键是0,右键是2，滚动轮是1
    div.onmousedown = function(e){
    div.onclick = function(e){
        console.log(e);
    }

3. 如何解决mousedown和click的冲突
例1:假定一个一个小方块是一个a标签，可以对它进行两个操作，一个是点击跳转页面，一个是正常拖拽，要求实现拖拽和点击是两个事件
解题思路：利用时间差
    var div = document.getElementsByTagName('div')[0];
    var firstTime = 0;
    var lastTime = 0;
    var  key = false;
    div.onmousedown = function(){
        firstTime = new Date().getTime();
    }
    div.onmouseup = function(){
        lastTime = new Date().getTime();
        if(lastTime - firstTime < 300){         //小于300证明是点击，执行onclick中的事件
            key = true;
        }
    }
    div.onclick = function(){
        if(key){
            console.log('click');      //每次执行后再将key置为false，以便下次判断
            key = false;
        }
    }

112.事件练习
1.拖拽应用： 应用 mousedown mousemove mouseup
2.随机移动的方块： mouseover

113.事件分类（接111）
1.键盘事件：keydown keyup keypress（down > press >up）
注意：移动端onmousedown就不好使了，移动端就用toushstart  toushmove  toushend  <==>和那个down move up一样的
（1）当连续按键盘时不抬起时，只有down和press没有up，所以由此延伸到游戏，当放技能时候，应该把事件绑定在keydown身上
例1：
    document.onkeypress = function(e){
        console.log(e);
    }
    document.onkeydown = function(e){
        console.log(e);
    }
//当在页面中打a的时候，keydown打印的e中的charCode值为0，keyup打印的e中的charCode值为97（a的ASCII码）
//当在页面中打键盘中的上下左右键时，每隔只出现了一个e并且是keydown打印出的e，并且这些控制键像shift等打印的都是keydown，keypress不见了
2.keydown和keypress的区别
（1）keydown能够监测到所有的键盘类按键的事件除了fn以外，fn是辅助按键不算键盘类事件
    但是keydown属性有个缺点，监测字符类的按键是不准的，大写的a和小写的a在e中charCode都是0，which都是65，
    而keypress，小写的a，charCode和which是97,大写的a，charCode和which是65，
         keypress只能够监测到字符类按键，ASCII中有的字符
（2）keydown和keypress怎样配合使用
    所以监测字符类按键并且想区分大小写的话，就用keypress
    如果操作类按键就用keydown，并且每个按键which（不是ASCII码）值是不一样的，但是有一点又不好，就是123...数字按键which对应的值不是ASCII的值，所以就得一个一个的测
（3）总结：keydown 可以响应任意键盘按键，keypress只可以相应字符类键盘按键 keypress返回ASCII码，可以转换成相应字符
例1：String上面有一个静态方法，可以将unicode编码转换为相应的字符（unicode码包含ASCII码）
    document.onkeypress = function(e){
        console.log(String.fromCharCode(e.charCode));
    }
//按a显示a，按b显示b，按shift+a显示A等等

114.事件分类（接111）
1.文本类操作事件：input,focus,blur,change
（1）input
例1：
    var input = document.getElementsByTagName('input')[0];
    input.oninput = function(e){
        console.log(this.value);
    }
//但凡input中内容有变化都会触发这个input事件
（2）change：比较的是聚焦和失去焦点两个状态是否发生改变，发生改变，那么触发事件，不改变，不触发事件
（3）focus和blur
例1：当聚焦显示为空，当失去焦点显示请指示
<input type="text" value="请输入用户名" οnfοcus="this.value=''" οnblur="this.value='请指示'">
例2：
<input type="text" value="请输入用户名" οnfοcus="if(this.value=='请输入用户名'){this.value=''}" οnblur="if(this.value==''){this.value='请输入用户名'}">
例3：这个有点问题，就是要是输入“请输入用户名”，点外部之后再聚焦，里面的内容就没了，例如58同城
<input type="text" value="请输入用户名" color="#999" οnfοcus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" οnblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">

115.事件分类（接111）
1.窗体操作类(window上的事件)
2.scroll load
例1：正常javascript标签是读到javascript时就阻断页面，所以将javascript写在最下面
但是，利用onload可以将div写在下面，这个虽然没有问题，但是一般不用，因为它是最慢的，而且没有意义。
<body>
<!--<div style="height: 100px; width: 100px; background-color: red;"></div>-->
<!--<div style="background-color:red;height:100px;width:100px;"></div>-->
<script type="text/javascript">
    window.onload = function(){
        var div = document.getElementsByTagName('div')[0];
        console.log(div);
        div.style.height = "100px";
        div.style.width = "100px";
        div.style.backgroundColor = "red";
    }
</script>
<div></div>
</body>
//部分代码省略

浏览器有时间线的问题，首先我们输入网址的时候，先将这个页面请求过来，再一行一行加载。
在一行一行解析的过程中，html和css是并行一起解析的，html解析的时候会形成domTree的东西，css会形成cssTree，就像这种
<div>
    <span></span>
    <strong></strong>
</div>
上面的代码html部分就会形成下面的树domTree（二叉树）
         document
         html
head             body
                                div
                strong   span
同样css也会有一个对应的树，然后两颗大树拼在一起，就会形成渲染树renderTree,渲染树大致就是，假如domTree中的div标签，渲染树中就有这个div多高多宽什么样的等
然后才开始绘制页面
那么问：什么时候算是把一个节点挂到这个树上面去呢，是把图片下载完了，再把img挂到树上去，还是读到img标签就挂上去呢？
答：不着急下载，系统读到img标签了，就会挂到树上去，这就叫代码的解析。
       所以是先解析再下载，先把这个东西解析，再同时开启一个线程，异步的去下载这个东西
那么：
<div></div>
<span></span>
<img src="xxx.solarge" alt="">
<script type="text/javascript">
</script>
把javascript放在这些下面好处就是，这些东西刚刚解析完毕之后，javascript就可以操作他们了，没必要等他们下载完之后，所以更快一点
而window触发load事件之后，那么就要等到这个页面所有的图片，文字等信息全部下载完之后，也就是，这个页面所有自动的过程全部完事，就等着用户交互体验了，window.onload才能执行，所以效率是最低的
但是也有好处：就是广告，等到页面所有加载完事了，再显示广告，但是决对不可以将主程序放在window.onload中

3. 小练习:fixed定位 js兼容版
例1：ie6是position的值没有fixed，那么利用js可以给他实现一个fixed定位的效果，当滚动轮滚过多少距离，将那个距离加到absolute（相对于文档定位）上，就可以实现fixed

4.二维数组：
例1：    var arr = [[1,2],[11,22]];