JS 事件名称 与 事件对象

鼠标事件 一般会加给 div

键盘事件一般会加给document 输入框

提交与 事件重置 则是加给整个form表单

用 类名获取 redDiv

鼠标事件 redDiv.onmousemove = function(){ console.log("鼠标移动的时候触发") } //鼠标移动的时候触发

redDiv.onclik = function(){ console.log("单机事件"); }//单机事件

redDiv.ondblclick = function(){ console.log("双击事件"); } //双击事件

redDiv.onmousedown = function(){ console.log("鼠标按下事件"); }//鼠标按下事件

redDiv.onmouseup = function(){ console.log("鼠标抬起事件"); }//鼠标抬起事件

redDiv.oncontextmenu = function(){ console.log("鼠标右击事件"); }

他们都可以添加返回值 当返回值等于false 他们所触发的事件都不会出现.

over 和 out会在鼠标从redDiv 的父级移动到子集的时候触发 , 先触发out , 在触发over

redDiv.onmouseover = function(){ console.log("over鼠标移入"); }

redDiv.onmouserout = function(){ console.log("out鼠标移出") }

leave 和 enter 从 redDiv (父级) 移动到 blueDiv (子集) 的时候不会触发

redDiv.onmouseenter = function(){ console.log("enter鼠标移入") }

redDiv.onmouseleave = function(){ console.log("leave鼠标移除") }

//只有鼠标离开i/ 移入整个redDiv的时候才会被触发.

键盘事件
redDiv.onkeydown = function(){ console.log("down键盘按下") }//按下任意键触发

docunment.onkeypress = function(){ console.log(press键盘按下) }//按下任意键触发

press 区分大小写, 但不支持特殊键

down 不区分大小写 但支持特殊按键

document.onkeyup = function(){ //松开键时触发 console.log("键盘拾起事件"); }

//表单事件

//获取事件名称

var uName = document.getElimentById("uName");

uName.oninput = function(){ console.log("input内容发生改变后触发") }

uName.onchange = function(){ console.log("change内容发生改变后出发"); } 在text文本框中 , 移入一个英语单词,每当输入一个字母时,就会触发oninput事件

//当输入完毕后, 离开文本框时,会触发onchange事件

uName.onfocus = function(){ //点击text文本框时触发 console.log("聚焦") }

uName.onblur = function(){ console.log("失焦"); }

//给form 表单绑定事件

reg.onsubmit = function(){ console.log("提交") //return false 没有的时候提交按钮会刷新页面

//return false
有的时候提交按钮不会刷新页面
}

reg.onreset = function(){ console.log("重置") //没有return false的时候,可以重置text框体内容 //有return false的时候 重置将会失败

}

//窗体事件 window事件 window.onresize = function(){ console.log("窗口尺寸发生变化的时候触发"); }

window.onscroll = function(){ // 触发这个窗口事件 //有前提 前提,前提是要有滚动条 console.log("窗口内容滚动的时候触发") }

//窗口加载完毕后 会触发这个方法 window.onload = function(){ consol.log("窗口加载完毕后触发"); }

//为什么JS事件函数里面都有一个参数(ev)?

因为 ev 是事件的参数 , 在ev 里面包含了事件 触发时的参数 , 比如click 事件中的 ev中 包含着 e.pageX , e.pageY,keyDown事件中 包含着 ev.keyCode等,在ie中,ev是全局的,可以通过window.event来获取,在其他浏览器中都是作为参数传入的.

所以好多事件函数都这样写 mydiv.onclick = function(ev){ if(!ev){ ev = window.event;//这句话也可以简写成:ev = window.event||ev; } } 上面这样写可以兼容各个浏览器