JAVASCRIPT高级程序设计_10_事件类型和模拟事件

Posted on 2018-03-01 18:03  Jonathan_C  阅读(167)  评论(0)    收藏  举报
  • 事件类型分类
  1. UI事件：用户与页面上的元素交互时触发
    • Load/onload事件：可通过js代码或者在HMTL标签特性中添加事件
    • unload/onunload事件：利用这个事件最多的情况是清除引用，以避免内存泄漏
    • resize事件：通过window触发，当浏览器窗口被调整到一个新的高度或宽度时触发。
    • scroll事件：文档被滚动期间被触发　　　　　　

　　2. 焦点事件：元素获得或者失去焦点

    • focusin/focusout：元素获得或者失去焦点时候触发，冒泡
    • focus/blur:　元素获得或者失去焦点时候触发，不冒泡　　　　

　　3. 鼠标事件，当用户通过鼠标在页面上执行操作时触发

    • click：单击按钮或按下回车
    • dbclick：双击按钮
    • mousedown/enter/leave/move/out/over/up： 按下任意鼠标/ 光标首次移动到内部/ 光标移开/ 元素内部移动/ 从一个元素移到另一个元素时/ 从外部移到元素内部/ 释放鼠标时候出发
    • 一般来说mouseover和mouseout用的比较多一些。
    • clientX和clinetY返回光标在浏览器中的坐标。
1             var div=document.getElementById('div');
2             div.onclick=function(event){
3                 console.log(event.clientX+"+"+event.clientY)
4             }
    • 　pageX和pageY能告诉你事件是在页面中的什么位置发生的　　　　　　　
            block.onclick=function(event){
                console.log(event.pageX+"+"+event.pageY);
            }
    • screenX和screenY可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息，电脑屏幕。
    • 键盘按键：shitfKey, ctrlKey, altKey和metaKey。返回值均为布尔值　　　　　　

　　4. 滚轮事件，当使用鼠标滚轮（或类似设备）时触发

    • mousewheel事件，通过event.wheelDelta显示滚轮的方向　　　　　　

　　5. 文本事件和键盘事件，当在文档中输入文本时触发.

    • keydown和keyup事件。当用户按下键盘上的任意键时，会触发keydown,当释放的时候，会触发keyup.一般触发之后，会返回keycode
    • keypress是指按下键盘上的字符键时触发，返回为charcode
1             var input=document.getElementById('input');
2             input.onkeydown=function(event){
3                 console.log(event.keyCode)
4             }
    • DOM3级

　对于后面的事件介绍将省略一些代码（代码已传到github上），主要目的为了解相关概念，毕竟数量太多，不同浏览器支持的事件也有区别，所以先将有关的概念过一遍，然后等需要的时候再专门研究。　　　　　　

　　6.  变动（mutation）事件，当底层DOM 结构发生变化时触发。

    • 在使用removeChild()或replaceChild()从DOM中删除节点时，首先会触发DOMNodeRemoved事件　

    • 在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时，首先会触发DOMNodeInserted 事件

　　7. HTML5事件

    • contextmenu 事件，用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单
    • beforeunload 事件，是为了让开发人员有可能在页面卸载前阻止这一操作
    • DOMContentLoaded 事件，DOMContentLoaded 事件则在形成完整的DOM 树之后就会触发，不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕.
    • readystatechange 事件，IE 为DOM文档中的某些部分提供了readystatechange 事件。
    • pageshow 和pagehide 事件，Firefox 和Opera 有一个特性，名叫“往返缓存”（back-forward cache，或bfcache），可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。
    • hashchange 事件，HTML5 新增了hashchange 事件，以便在URL 的参数列表（及URL 中“#”号后面的所有字符串）发生变化时通知开发人员、

　　8. 内存和性能

    • 事件委托，事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
 1                 //事件委托                
 2                 var lists=document.getElementById('eventAll');
 3                 EventUtil.addHandler(lists,"click",function(event){
 4                     event=EventUtil.getEvent(event);
 5                     var target=EventUtil.getTarget(event);
 6                     var content=document.getElementById('change');
 7                     
 8                     switch(target.id){
 9                         case "go":
10                         location.href="www.baidu.com"
11                         break;
12                         case "change":
13                         content.innerHTML="Changed";
14                         break;
15                         case "sayHi":
16                         alert("Hi");
17                         break;
18                     }
19                 });
    • 移除事件处理程序，也可以提高性能。
    • 比如，将一个按钮设置了onclick事件，如果确定该按钮不再需要，那么就可以手工移除事件处理程序
1 var btn=document.getElementById("myButton");
2 btn.onclick=function(){
3     .........................
4 }
5 //确认btn不需要再使用之后，移除引用关系
6 btn.onclick=null;
  • 模拟事件通过createEvent来实现