1.事件类型

2016-10-09 本文已影响28人素弥

鼠标事件

click

在一个元素上鼠标的左键点击下去后抬起就能触发

dblclick

在一个元素上鼠标的左键双击下去后抬起就能触发

mousedown

在一个元素上鼠标左中右键按下去（不需要抬起来）的时候就会触发（如果长按不会持续触发）

mouseup

在一个元素上鼠标左中右键抬起来（不需要鼠标在元素上面按下去）的时候就会触发

mousemove

在一个元素上鼠标移动的时候就会触发

mouseover/mouseout

在一个元素上鼠标移入和移出就会触发

mouseenter/mouseleave

在一个元素上鼠标移入和移出就会触发

mouseover / mouseout 和 mouseenter / mouseleave 的区别

mouseover / mouseout
它们会把事件传递给子元素
mouseenter / mouseleave
他们不会把事件传递给子元素（IE6不兼容）

键盘事件

不是所有的元素都有键盘事件，只有有焦点的元素才有键盘事件，当这些有焦点的元素在聚焦的时候，键盘事件才达到触发条件之一（键盘事件触发条件之二就得看事件的内容了）

keyup

键盘抬起时触发的事件

keydown

键盘按下时触发的事件（如果长按则会一直触发）

keypress

键盘按下时触发的事件（如果长按则会一直触发）

keypress与keydown的区别

keydown
所有按键按下去都会触发
keypress
只有当按下能在输入框显示的键时才会触发，例如字母,符号,数字,enter等等

焦点事件

focus

有焦点事件的元素获得焦点时触发

blur

有焦点事件的元素失去焦点时触发

关于焦点的方法

设置焦点focus()
移除焦点blur()

<!--输入框提示实例-->
<body>
    <input type="text" value="请输入内容">
</body>
<script>
    var input=document.querySelector('input');
    input.focus();                 //打开页面就将输入框聚焦
    input.onfocus=function(){
        this.value='';             //聚焦时去掉提示文字
    };
    input.onblur=function(){
        this.value='请输入内容';    //失去焦点时重新显示提示文字
    };
</script>