HTML事件指的是那些不一定与用户操作有关的事件。HTML事件包括下面的一些事件:
load
:当页面完全加载之后在window
上面触发,或者当所有的框架加载完毕之后在框架集上触发,或者图像加载完毕之后在<img>
元素上触发,或者嵌入内容加载完毕时在<object>
元素上面触发。unload
:当页面完全卸载之后在window
上面触发,或者当所有的框架卸载完毕之后在框架集上触发,或者嵌入内容卸载完毕时在<object>
元素上面触发。abort
:当用户停止下载过程时,如果嵌入的内容没有加载完毕,则在<object>
元素上面触发。error
:当发生JavaScript错误时在window
上触发,或者当无法加载图片时在<img>
元素上触发,或者无法加载嵌入内容时在<object>
元素上面触发,或者当一个或多个框架无法加载时在框架集上触发。select
:当用户选择文本框中的一个或多个字符时触发。change
:当文本框失去焦点或获得焦点后其值被改变时触发。submit
:当用户单击提交按钮时在<form>
元素上触发。reset
:当用户单击重置按钮时在<form>
元素上触发。scroll
:当用户滚动带滚动条的元素的内容时触发。focus
:当页面或元素获得焦点时在window
或相应元素上触发。blur
:当页面或元素失去焦点时在window
或相应元素上触发。
大多数的HTML事件都和window对象或表单控件相关。
加载事件(load)
在编写JavaScript代码时最常用的事件就是load
事件。当页面中的元素、所有图像、JavaScript文件和CSS文件等外部资源完全加载之后,就会在触发window
对象上的load
事件。
我们可以通过两种方式来定义onload
事件。第一种方式是通过JavaScript来指定事件处理程序的方式。例如下面的代码:
function addEventHandler(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on" + type] = handler; } } addEventHandler(window,'load',function(event){ console.info("页面已经加载完毕!"); });
和其它事件类似,上面的方法中也传入了一个event
对象,但是这个event
对象不包含有关这个事件的任何信息。在兼容DOM的浏览器中,event.target
属性的值会被设置为document
,而在IE中并不会为这个事件设置srcElement
属性。
第二种指定onload
事件处理程序的方法是为<body>
元素添加一个onload
特性,例如下面的代码:
<html lang="zh"> <head> <meta charset="UTF-8"> <title>Load事件</title> </head> <body onload="alert(页面加载完毕!)"> </body> </html>
根据DOM2级规范,应该是在document
对象而非window
对象上触发load
事件,但是所有的浏览器都在window
上面实现了该事件。
在图像上面也可以触发load
事件。我们可以在HTML中为任何图像指定onload
事件处理程序。
<img src="img/demo.jpg" onload="alert('图像加载完毕!')"/>
同样的功能也可以使用JavaScript来实现。例如下面的代码:
var img = document.getElementById("myImg"); /* 跨浏览器事件处理程序 */ function addEventHandler(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on" + type] = handler; } } /* 跨浏览器获取event对象 */ function getEvent(event){ return event ? event : window.event; } /* 跨浏览器获取事件的目标 */ function getTarget(event){ return event.target ? event.target : event.srcElement; } addEventHandler(img,'load',function(event){ event = getEvent(event); //打印出图片的URL console.info(getTarget(event).src); });
卸载事件(unload)
与load
事件对应的是unload
事件,这个事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面,就会触发unload
事件。这个事件通常用于清除引用,避免内存泄露。
和load
事件相同,onunload
事件处理程序也有两种指定方式。第一种是使用JavaScript的方式,例如:
function addEventHandler(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on" + type] = handler; } } addEventHandler(window,'unload',function(event){ console.info("页面已经卸载完毕!"); });
第二种是为<body>
元素添加一个onunload
特性,例如下面的代码:
<html lang="zh"> <head> <meta charset="UTF-8"> <title>unload事件</title> </head> <body onunload="alert(页面卸载完毕!)"> </body> </html>
不论使用哪种方式,在编写onunload
事件处理程序的时候都需要小心,unload
事件是在一切都被卸载之后才触发,那么页面加载之后存在的那些对象现在都不存在了,此时操作DOM节点或元素就会发生错误。
调整大小事件(resize)
当浏览器窗口被调整到一个新的宽度和高度的时候就会触发resize
事件,这个事件在window
上触发,我们可以通过JavaScript或<body>
元素上的onresize
特性来指定onresize
事件处理程序。下面是使用JavaScript来指定的代码:
function addEventHandler(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on" + type] = handler; } } addEventHandler(window,'onresize',function(event){ console.info("您调整了浏览器窗口的大小!"); });
不同的浏览器对于什么时候触发resize
事件有不同的机制。IE、Chrome、Safari和Opera浏览器会在浏览器窗口变化1像素时就触发resize
事件,然后随窗口变化不断重复触发。而Firefox浏览器只会在用户停止调整浏览器窗口时才触发resize
事件。所以,我们在这个事件中不应该添加大量的计算代码,因为这些代码可能被频繁的执行,导致浏览器反应缓慢。
网友评论文明上网理性发言 已有0人参与
发表评论: