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的值,还有其他的类似属性值,得在测试一下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容

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