javascript事件（2）

最新推荐文章于 2020-11-27 22:06:30 发布

原创最新推荐文章于 2020-11-27 22:06:30 发布 · 938 阅读

0 ·

CC 4.0 BY-SA版权

javascript学习笔记专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了UI事件的概念及其种类，包括load、unload、resize等，并解释了这些事件如何应用于不同的HTML元素，如window、img和script等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UI事件

UI事件指的是哪些不一定与用户操作有关的事件。

load

当页面完全加载后，在window上触发，当所有框架都加载完毕时在框架上触发，当图像加载完毕时在img元素上触发，或当嵌入的内容加载完毕时在object元素上触发。

有两种方式可以指定onload事件，

第一种是用javascript事件（1）中定义的EventUtil对象来定义：

EventUtil.addHandler(window,'load',function(){
        alert('Loaded!');
});

第二种是直接在body元素上添加一个onload特性：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body onload="alert('Loaded!')">

</body>
</html>

图像上的load事件

可以在HTML中为任何图像指定onload事件处理程序：

<img src="image.jpg" alt="" onload="alert('Image loaded.')">

也同样可以用javascript来实现：

var image=document.getElementById('myImage');
  EventUtil.addHandler(image,'load',function(){
       alert('Image loaded.');
  });

新创建的img元素，可以为其指定一个事件处理程序，以便图像加载完毕后给出提示。注意： 要在指定src属性之前指定事件。新的图像元素只要设置了src属性就会开始加载，不管它有没有添加到文档中：

 EventUtil.addHandler(window,'load',function(){
     var image=document.createElement('img');
     EventUtil.addHandler(image,'load',function(event){
         event=EventUtil.getElement(event);
         alert(EventUtil.getTarget(event).src);
     });
     document.body.appendChild(image);
     image.src='iamge.jpg';
 });

script元素上的load事件

script元素也会触发load事件，但是与img元素不同的是：只有在设置了script元素的src属性并将它们添加到文档后，才会开始下载javascript文件。所以，script元素指定src属性和执行事件处理程序的顺序先后并不重要：

 EventUtil.addHandler(window,'load',function(){
     var script=document.createElement('script');
     EventUtil.addHandler(script,'load',function(){
         alert('Loaded!');
     });     
     script.src='example.js';
     document.body.appendChild(script);
 });

unload事件

unload事件在文档被完全卸载后触发，在所有框架都卸载后在框架集上触发，或当嵌入的内容卸载完毕后在object元素上触发。

同样也有两种方式可以指定onunload事件，

第一种是用javascript事件（1）中定义的EventUtil对象来定义：

EventUtil.addHandler(window,'unload',function(){
     alert('Unloaded!');
});

第二种是直接在body元素上添加一个onunload特性：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body onunload="alert('Unloaded!')">

</body>
</html>

resize事件

当窗口或框架大小变化时window或框架上触发。

可以用javascript事件（1）中定义的EventUtil对象来定义resize事件：

EventUtil.addHandler(window,'resize',function(){
     alert('Resized!');
});

同样也可以通过body元素的onresize特性来指定处理程序。

关于何时触发resize事件，不同浏览器有不同的机制，IE、Safari、Chrome和Opera会在浏览器窗口变化了1px时就触发resize事件，然后随着变化不断重复触发。Firefox则只会在用户停止调整窗口大小时才会触发resize事件。因此，尽量不要在resize事件处理程序中加入大量的计算代码，以避免代码被频繁执行而影响性能。

scroll事件

当用户滚动带滚动条的元素内容时，在该元素上就会触发scroll事件。

在混杂模式下，可以通过body元素的scrollLeft和scrollTop来监控这一变化；在标准模式下，除safari之外的所有浏览器都会通过html元素来反映这一变化：

EventUtil.addHandler(window,'scroll',function(){
     if(document.compatMode=='CSS1Compat'){
         alert(document.documentElement.scrollTop);
     }else{
         alert(document.body.scrollTop);
     }
});

因此，我们经常会看到这样的代码：

var scroll_top=document.documentElement.scrollTop || document.body.scrollTop;

焦点事件

焦点事件会在页面获得或失去焦点时触发。主要有以下几个：

blur事件

在元素事情焦点时触发。这个事件不会冒泡，所有浏览器都支持它。

focus事件

在元素获得焦点时触发。这个事件不会冒泡，所有浏览器都支持它。

鼠标与滚轮事件

鼠标事件是web开发中最常用的一类事件。DOM3事件中定义了9个鼠标事件：

click事件

在用户单击主鼠标按钮或者按下回车键时触发。

dblclick事件

在用户双击主鼠标按钮时触发。

mousedown事件

在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。

mouseenter事件

在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。

mouseleave事件

在元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。

mousemove事件

当鼠标指针在元素内部移动时重复触发。不能通过键盘触发这个事件。

mouseout事件

在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。

mouseover事件

在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。

mouseup事件

在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。