JS—事件类型(UI事件)

这里笼统的罗列了js的事件类型。


UI事件-当用户与页面上的元素交互时触发
DOM3级事件-UI事件除了已经被废弃的DOMActivate事件外,其他事件在DOM2级事件中被归为HTML事件。

  • 判定浏览器是否支持该事件类型
    var isSupported=document.implementation.hasFeature('HTMLEvents','2.0');
    alert(isSupported);//true or false
    var isSupported=document.implementation.hasFeature("UIEvent",'3.0');
    alert(isSupported);//true or false
    • load事件

      • 该事件内的event对象并不包含有关这个事件的任何附加信息。
      • 在兼容DOM的浏览器中,存在event.target,IE中不存在srcElement
      • IE8及之前的版本不会生成event对象。IE9修复了这个问题。
      • window-load
        当页面完全加载完毕后,包括所有图像、js文件、css文件等外部资源,就会触发window上面的load事件。
        方法1:通过通用侦听事件函数,为window对象添加load事件
        function handler(){
        alert("页面加载完毕!");
        }
        EventUtil.addHandler(window,'load',handler);
        方法2:通过在body元素上指定load事件。(html指定,0级2级)
        在window上发生的任何事件都可以在body元素中通过相应的特性来指定。
      • image-load
        当图像加载完毕后,就会触发image上面的load事件。
        方法1:html指定。
        方法2:通过通用侦听事件函数,为image对象添加load事件
        function handler(){
        alert("图像加载完毕!");
        }
        var image=document.getElementById("img")
        EventUtil.addHandler(image,'load',handler);
        方法3:为新创建的图像元素添加load事件
        EventUtil.addHandler(window,"load",function(){
        var image=document.createElement('img');
        EventUtil.addHandler(image,'load',function(event){
        event=EventUtil.getEnent(event);
        alert(EventUtil.getTarget(event).src);
        })
        document.body.appendChild(image);
        image.src='../css/xin.jpg';
        });
        【解释1】在window的load事件处理程序内写,是为了确定页面已经加载完毕,页面加载前操作会报错。
        【解释2】在指定src属性之前先指定事件,因为一旦设置了src,不一定被添加到文档,便开始加载图片。
        【解释3】在加载之前添加到文档,因为如果不添加到文档,当图片下载完毕后,也会显示警告框。
      • Link与script-load
        方法同上,但是需要区别的是:
        只有在设置了<script>元素的scr属性并将该元素添加到文档后,才会开始下载js文件。同样的<link>元素的href属性。
    • unload事件
      当文档、图像、或者引用被用户卸载后,会触发这个事件。
      方法与load相似。

    • resize事件
      当浏览器窗口被调整到一个新的高度或宽度使就会触发resize事件,每当改变一像素就会触发resize事件,所以不要在这段处理程序内添加大量计算的代码。
      方法有两个:一个是在body上添加,另一个是使用通用侦听函数在window上添加

       EventUtil.addHandler(window,'resize',function(){
           alert('resized')
       })
      
    • scoll事件
      EventUtil.addHandler(window,'scroll',function(){
      if(document.compatMode=='CSS1Compat'){
      alert(document.documentElement.scrollTop);
      }else{
      alert(document.body.scrollTop);
      }
      })
      【解释1】这里有网友总结了document.compatMode兼容模式该属性,他有两个值
      BackCompat:标准兼容模式关闭。
      CSS1Compat:标准兼容模式开启。
      在标准模式下,是通过<html>元素来反应这一变化的。混杂模式下是通过body元素。
      浏览器中,除了safari,都是在标准模式下进行渲染的。
      【解释2】scrollLeft与scrollTop的值,还有其他的类似属性值,得在测试一下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 个人博客:https://yeaseonzhang.github.io 花了半个多月的时间,终于又把“JS红宝书”...
    Yeaseon阅读 5,742评论 2 23
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,935评论 0 1
  • 事件类型 Web浏览器可能发生的事件类型有很多。不同的事件类型具有不同的信息,而“DOM3级事件“规定了以下几类事...
    ConRon阅读 4,385评论 0 1
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,407评论 2 17
  • 从前,有四个人,他们是村里最穷的人。这不,眼看就要过年了,这四个人却还是穷的叮当响。于是,这四个人就聚在一起商量怎...
    女巫的大勺子阅读 2,854评论 2 2

友情链接更多精彩内容