文档04_JavaScript_事件
常用事件
事件名称 |
含义 |
作用对象 |
详细说明 |
onClick |
鼠标单击 |
link、button、submit、reset、form、image |
已经很熟悉,如单击按钮、图片、文本框、列表框等 |
onChange |
内容发生改变 |
input、select和多行文本框(textarea) |
如文本框的内容发生改变 |
onBlur |
失去焦点 |
window、frame所有表单对象(比如按钮、单选框) |
当光标从某一控件移出时产生 |
onFoucs |
获得焦点 |
window、frame所有表单对象(比如按钮、单选框) |
如单击文本框时,该文本框就获得焦点(鼠标),产生onFocus(获得焦点)事件 |
onMouseOver |
鼠标悬停事件 |
link、链接中的图像 |
当移动鼠标,停留在图片或文本框等的上方,就产生onMouseOver(鼠标悬停)事件 |
onMouseOut |
鼠标移出事件 |
link、链接中的图像 |
当移动鼠标,离开图片或文本框的区域,就产生onMouseOut(鼠标移出)事件 |
onMouseMove |
鼠标移动事件 |
link、链接中的图像 |
当鼠标在图片或层<DIV>、<SPAN>等HTML元素上方移动时,将产生onMouseMove(鼠标移动)事件 |
事件名称 |
含义 |
作用对象 |
详细说明 |
onLoad |
页面加载事件 |
body、frameset、image |
HTML网页从网站服务器下载到本机后,需要浏览器加载到内存中,然后解释执行并显示。浏览器加载HTML网页时,将产生onLoad(页面加载)事件 |
onUnload |
页面关闭事件 |
body、frameset |
当文档被关闭或重置时调用 |
onMouseDown |
鼠标按下事件 |
link、链接中的图像 |
当用户用任何鼠标按键单击对象时触发 |
onMouseUp |
鼠标弹起事件 |
link、链接中的图像 |
当用户在鼠标位于对象之上时,释放鼠标按键时触发 |
onResize |
窗口大小改变事件 |
window |
当用户改变窗口大小时产生,如窗口最大化、窗口最小化、用鼠标拖动改变窗口大小等时 |
示例,检测事件对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function Mousedown(event) { var theEvent=event?event:window.event; alert("X:"+theEvent.screenX+"Y:"+theEvent.screenY); } document.onmousedown=Mousedown;
Event对象属性(可以跨浏览器)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function getEvent(eventObj) { return eventObj?eventObj : window.event; }
altKey boolean类型 用来返回事件触发时Alt键是否按下
ctrlKey boolean类型 用来返回事件触发时ctrl键是否按下
clientX 事件触发时客户端的当前X坐标
clientY 事件触发时客户端的当前Y坐标
keyCode 用来表示当前按键的代码(数值)
screenX 事件触发时屏幕的X轴坐标
screenY 事件触发时屏幕的Y轴坐标
shiftKey boolean类型 用来表示事件触发时Shfit键是否按下
Type 事件类型
This关键字表示当前调用的函数或者方法的所有者,可以在当前的函数中使用
DOM Level 2 事件
//添加事件
eventObj.addEventListener("事件类型",函数名,boolean);//添加事件监听,false表示以冒泡的方式处理,true表示以捕获的方式处理,other浏览器
removeEventListener:删除事件监听
dispatchEventListener:分发一个新的事件监听
attachEvent("事件类型",函数名)//添加事件,IE中
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//说明:K 跨浏览器兼容事件处理 //参数:eventObj事件对象,eventName事件类型,eventHandler事件句柄/函数名 //返回:无 function catchEvent(eventObj,eventName,eventHandler) { if(eventObj.addEventListener)//other { //false以冒泡方式处理,true以捕获方式处理 eventObj.addEventListener(eventName,eventHandler,false);//eventObj.addEventListener("click",函数名,false); }else if(eventObj.attachEvent)//IE { eventName="on"+event; eventObj.attachEvent(eventName,eventHandler); } }
History:历史记录
Navigator:浏览器相关信息
Screen:屏幕信息
Location:页面位置,常用的属性:href、hostname、host
定时器
执行一次,setTimeout(函数句柄,时间毫秒数,参数1,参数2)注意在IE里面不支持在后面传递参数、clearTimeout,删除定时器,参数是该定时器的句柄
周期性执行,setInterval(函数句柄,时间毫秒数)
注意
带参数方法使用setTimeout要注意,setTimeout("函数名("+参数+")",毫秒数),这里的参数只能字符串形式的,而不能传递一个对象,网上很多朋友也在问此类问题