JavaScript-事件续

事件分类：

鼠标事件：

click(点击事件。右键不触发），mousedown(鼠标点击下去事件） mouseup(鼠标弹起事件)

click=mousedown+mouseup;  (click事件是比较迟缓的）

看如下代码：

        document.onclick=function() {
            console.log('click');
        }
        document.onmousedown=function() {
            console.log('mousedown');
        }
        document.onmouseup=function() {
            console.log('mouseup');
        }

看的应该很清楚的，对时间精度要求比较的话，mousedown好一些（比如游戏技能的释放）

判断是鼠标表示左键还是右键还是滚动轮点击，需要看mousedown或者mouseup的event里面的button属性

button：左键为0，滑轮点击1，右键为2

左键点击。

dom3规定：click事件只能监听左键，只能通过mousedown和mouseup来监听鼠标键。

mouseover(鼠标移入的事件） mouseout(鼠标移出的事件）

        <div class='demo' ></div>
        <script type="text/javascript">
        var div=document.getElementsByTagName('div')[0];
        div.onmouseenter=function() {
            div.style.background='green';
        }
        div.onmouseleave=function() {
            div.style.background='red';
        }

当鼠标移入div变绿，移出变红

如何区分mousedown和click，简单的说拖拽事件不与click事件混淆，也就是拖拽时不发生click事件。

关键在时间的处理上。

        var startTime=0,lstTime=0,key=false;
        document.onmousedown=function() {
            startTime=new Date().getTime();
        }
        document.onmouseup=function() {
            lastTime=new Date().getTime();
            if (lastTime-startTime<300) {
                key=true;
            }
        }
        document.onclick=function() {
            if (key) {
                //执行点击
                key=false;
            }
        }

contextmenu(右键产生菜单事件）

键盘类事件

keypress(按键事件） keydown(按键时按下）keyup(按键时弹起）

注意这里的keypress!=keydown+keyup

        document.onkeypress=function() {
            console.log('press');
        }
        document.onkeydown=function() {
            console.log('down');
        }
        document.onkeyup=function() {
            console.log('up');
        }

keydown>keypress>keyup（keypress与它们没关系）

而且它们可以连续触发。

keypress和keydown的区别

keydown可以对键盘上的任何键做出响应，而keypress只能对字符类的键盘按键做出响应（像shift啊什么的，做不了相应)

文本类操作事件：input focus blur change

input 和change事件

        <input></input>
        <script type="text/javascript">
        var input=document.getElementsByTagName('input')[0];
        input.oninput=function() {
            console.log(this.value);
        }
        </script>

只要我们input标签里面的内容发生变化就触发

我们改成change输入123时没有发生任何变化，当鼠标的失去焦点时（比如点击其他位置），如果内容发生变化那么触发事件。

focus当鼠标焦点在input上时就触发.

onblur 属性在元素失去焦点时触发。

常用于表单验证代码（例如用户离开表单字段）。这种东西也是。

scroll事件,当滑轮滑动时触发（window上事件）

        window.onscroll=function() {
            console.log('cyl');
        }

当滑轮滚动时，输出cyl。

load事件这个可以去看看这个博主的，感觉很详细。