1.什么是事件
通过键盘或鼠标操作页面,让页面发生变化时,都会产生一个事件对象我们可以通过这个事件对象获取必要的信息,比如:点击事件的点击坐标,键盘事件的按键位置等
2.事件对象
A。获取对象:
通过window对象下的event属性来获取当前事件产生的事件对象
window.event;
event;
在老式浏览器中,事件对象是通过事件函数的形式传递进来的
兼容性写法使用逻辑或表达式判断那种形式可以获取到事件对象,并把那种形式获取到的对象返回出来
document.onclick=function(ev){
(获取到点击事件产生的事件对象)
var eventObj=ev||event;
}
document.onkeydown=function(ev){
(获取到键盘事件按下的事件对象)
var eventObj=ev||event;
}
总结
任何事件(浏览器触发或用户触发)被触发后,都会产生一个事件对象。而这个事件对象中的属性以及属性值,是由该对象的事件决定的
B。通过对象:
用户对页面进行操作时都是事件,我们可以给事件绑定一个函数,当用户触发该事件后,事件所绑定的函数才被执行
点击对象的常用属性
clientX\clientY:获取到的是鼠标点击的当前位置距离浏览器左边框和顶边框的间距
offsetX\offsetY:获取到的是鼠标点击的位置距离当前点击标签的左边框和顶边框的距离(自己的标签)
screenX\screenY:获取到的是鼠标点击的位置距离整个屏幕左边框和顶边框的间距
pageX\pageY:获取到的是鼠标点击的位置距离整个文档(页面)的左边框和顶边框的间距
3.鼠标事件mouse
鼠标点击事件:click(用户按下并抬起鼠标左键);
按下鼠标左键事件mousedown
div.onmousedown=function(){}
抬起鼠标左键事件mouseup
div.onmouseup=function(){}
click事件:执行了mousedown和mouseup之后才触发事件
mousedown事件当鼠标按下时触发
mouseup事件当鼠标抬起时触发
如果事件是需要按下并抬起才能触发,则使用click事件
如果鼠标按下,抬起需要发出两个不同的事件,按下使用mousedown事件,抬起使用mouseup而不是click
为避免冲突,mouseup和click事件尽量不要在同一个标签上同时使用
鼠标移入div标签mouseover从外到内的
div.onmouseover=function(){}
鼠标移出标签内部mouseout从内到外
div.onmouseout=function(){}
鼠标在标签内部移动mousemove只要鼠标在标签内部移动,就会不断的触发该事件,可以通过该事件产生的事件对象不断获取当前鼠标移动的位置
div.onmousemove=function(){}
双击事件
div.dblclick=function(){}
定制右键菜单
document.oncontextmenu=function(){}
清楚默认的事件样式return false;
4.键盘事件
document.onkeydown=function(ev){}
键盘按键事件对象保存着当前按下的键位信息。我们可以通过keycode获取到获取到当前用户按下的是那个按键
enter 13;
a-z:65-90;
0-9: 48-57;
左上右下方向键37,38,39,40;
Alt\shift\ctrl按下时,对应的属性值是true
左右shift区分:location属性值是1表示左,2表示右边的
例如:(模拟留言板)
window.onload=function(){
var div=document.querySelector('div');
var txt=document.querySelector('input');
text.onkeydown=function(ev){
var eventObj=ev||event;
if(eventObj.ctrlKey==true&&eventObj.keyCode==13){
if(text.length==0){
txt.placeholder='请输入文字';
}else{
var p=document.createElemet('p');
var code=txt.value;
p.innerHTML='code';
div.appendChild(p);
txt.value='';
}
}
}