事件类型-UI事件、焦点事件

DOM3级事件包括以下几类事件:

  • UI事件:当用户与页面上的元素交互时触发
  • 焦点事件:当元素获得或失去焦点时触发
  • 鼠标事件:当用户通过鼠标在页面上执行操作时触发
  • 滚轮事件:当使用鼠标滚轮时触发
  • 文本事件:当在文档中输入文本时触发
  • 键盘事件:当用户通过键盘在页面上执行操作时触发
  • 合成事件:当为IME(输入法编辑器)输入字符时触发
  • 变动事件:当底层DOM结构发生变化时触发

UI事件

包括以下事件:

1.load事件

当页面完全加载后(包括所有图像、js文件、css文件等外部资源)在window上面触发;当所有框架都加载完毕时在框架集上面触发;当图像加载完毕时在元素上面触发;当嵌入内容加载完毕时在元素上触发。
两种定义onload事件处理程序的方式:
(1) js代码
(2) 为元素添加一个onload属性

/*第一种方式*/
EventUtil.addHandler(window,"load",function(event){
  //进行相应的操作
})
/*第二种方式*/

1.1 图像上触发load事件
/*方式1*/
![](...)
/*方式2*/
var image = document.getElementById("myImage");
        EventUtil.addHandler(image, "load", function(event){
            event = EventUtil.getEvent(event);
            alert(EventUtil.getTarget(event).src);
        });

在创建新的元素时,可以为其指定一个事件处理程序,以便图像加载完之后给出提示,但是重要的是在指定src属性之前先指定事件,如下:

/*为window指定事件,确保在document.body不会出错,页面已经完全加载*/
EventUtil.addHandler(window, "load", function(){
            var image = document.createElement("img");
       //指定src之前先指定事件
            EventUtil.addHandler(image, "load", function(event){
                event = EventUtil.getEvent(event);
                alert(EventUtil.getTarget(event).src);
            });
            document.body.appendChild(image);
            image.src = "smile.gif";            
        });

注意:新图像元素不一定要从添加到文档后才开始下载,只要设置了src属性就会开始下载。

1.2

你可能感兴趣的:(事件类型-UI事件、焦点事件)