当前位置主页 > 资料库 > 前端教程 > JavaScript事件-HTML事件

JavaScript事件-HTML事件

2015-12-07

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事件。所以,我们在这个事件中不应该添加大量的计算代码,因为这些代码可能被频繁的执行,导致浏览器反应缓慢。

Previous:
上一篇:JavaScript事件-键盘事件
Next:
下一篇:JavaScript深入理解函数 - 函数的定义
返回顶部