鼠标事件
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>
网友评论