一、鼠标事件:
onclick //点击
onmouseout //移出
onmouseover //移入
onmouseenter //移入
onmouseleave //移出
ondblclick //双击
oncontextmenu:鼠标右键
onmousemove //移动
onmousedown //按下
onmouseup //抬起
注意:鼠标移入移出事件:(是同一个div触发的时候)
over和out会在鼠标从父级移入子级元素的时候触发
enter和leave只有在移入和移出父级和子级整体的时候才会触发
redDiv.onmouseout=function(){
console.log("out鼠标移出")
}
redDiv.onmouseover=function(){
console.log("over鼠标移入")
}
redDiv.onmouseenter=function(){
console.log("enter鼠标移入")
}
redDiv.onmouseleave=function(){
console.log("leave鼠标移出")
}
鼠标移入父级,触发enter和over
从父级移到子级,父级out,子级over
鼠标移出父级和子级的整体时触发leave
二、键盘事件
onkeydown
onkeyup
onkeypress
输入框可以添加键盘事件,只有成为焦点的时候才会触发键盘事件
三、表单事件
onchange:内容发生变化(前提是失去焦点后)
onblur:失去焦点
onfocus:获得焦点
oninput:输入框内容发生变化时触发,实时触发
onsubmit:表单提交时触发
onreset:表单重置时触发
五、获取事件对象event
redDiv.onmousemove(ev){
var ev =window.event||ev; //兼容
}
四、阻止默认事件
return false;
ev.returnValue=false;
ev.preventDefault();
五、滚轮事件
谷歌/IE:onmousewheel
ev.wheelDelta :滚动一格数值120 上正下负
火狐:DOMMouseScroll
ev.detail:滚动一格数值为1 下正上负
兼容写法:
function addMouseWheel(el,fn){
if(navigator.userAgent.indexOf("Firefox")!=-1){
//火狐
el.addEventListener("DOMMouseScroll",fn,false)
}else{
//谷歌 IE
el.onmousewheel=fn;
}
}