Javascript之事宜(二)

2019年8月30日 135次阅读 来源: yuhualingfeng

《Javascript之事宜(二)》事宜范例

UI事宜

  1. load：当页面完全加载后在window 上面触发，当一切框架都加载终了时在框架集上面触发，当图象加载终了时在<img>元素上面触发，或许当嵌入的内容加载终了时在<object>元素上面触发

  2. unload:当页面完全卸载后在window 上面触发，当一切框架都卸载后在框架集上面触发，或许当嵌入的内容卸载终了后在<object>元素上面触发

  3. resize：当窗口或框架的大小变化时在window 或框架上面触发

  4. scroll：当用户转动带转动条的元素中的内容时，在该元素上面触发。<body>元素中包括所加载页面的转动条

  5. error：当发作JavaScript 错误时在window上面触发，当没法加载图象时在<img>元素上面触发，当没法加载嵌入内容时在<object>元素上面触发，或许当有一或多个框架没法加载时在框架集上面触发

这些事宜在DOM2级事宜中都归为html事宜,可以经由过程以下代码推断浏览器是不是支撑DOM2级事宜

var isSupported = document.implementation.hasFeature('HTMLEvents',2.0);

核心事宜

  1. blur：在元素落空核心时触发。这个事宜不会冒泡；一切浏览器都支撑它.

  2. focus：在元素取得核心时触发。这个事宜不会冒泡；一切浏览器都支撑它

鼠标与滚轮事宜

  1. click：在用户单击主鼠标按钮（平常是左侧的按钮）或许按下回车键时触发。这一点对确保易接见性很主要，意味着onclick 事宜处置惩罚顺序既可以经由过程键盘也可以经由过程鼠标实行

  2. dblclick：在用户双击主鼠标按钮（平常是左侧的按钮）时触发。从技术上说，这个事宜并非DOM2 级事宜范例中划定的，但鉴于它得到了普遍支撑，所以DOM3 级事宜将其纳入了规范。

  3. mousedown：在用户按下了恣意鼠标按钮时触发。不能经由过程键盘触发这个事宜。

  4. mouseenter：在鼠标光标从元素外部初次挪动到元素局限以内时触发。这个事宜不冒泡，而且在光标挪动到子女元素上不会触发。DOM2 级事宜并没有定义这个事宜，但DOM3 级事宜将它纳入了范例。IE、Firefox 9+和Opera 支撑这个事宜。

  5. mouseleave：在位于元素上方的鼠标光标挪动到元素局限以外时触发。这个事宜不冒泡，而且在光标挪动到子女元素上不会触发。DOM2 级事宜并没有定义这个事宜，但DOM3 级事宜将它纳入了范例。IE、Firefox 9+和Opera 支撑这个事宜

  6. mousemove：当鼠标指针在元素内部挪动时反复地触发。不能经由过程键盘触发这个事宜。

  7. mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可以位于前一个元素的外部，也多是这个元素的子元素。不能经由过程键盘触发这个事宜。

  8. mouseover：在鼠标指针位于一个元素外部，然后用户将其初次移入另一个元素边境以内时触发。不能经由过程键盘触发这个事宜

  9. mouseup：在用户开释鼠标按钮时触发。不能经由过程键盘触发这个事宜

  10. mousewheel：当用户经由过程鼠标滚轮与页面交互、在垂直方向上转动页面时（不管向上照样向下），就会触发mousewheel事宜

运用以下代码可以检测浏览器是不是支撑以上DOM2 级事宜（除dbclick、mouseenter 和mouseleave 以外）：

var isSupported = document.implementation.hasFeature("MouseEvents", "2.0");

要检测浏览器是不是支撑上面的一切事宜，可以运用以下代码：

var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")

鼠标事宜都是在浏览器视口中的特定位置上发作的。这个位置信息保留在事宜对象的clientX 和clientY 属性中。一切浏览器都支撑这两个属性
经由过程客户区坐标可以晓得鼠标是在视口中什么位置发作的，而页面坐标经由过程事宜对象的pageX 和pageY 属性,在页面没有转动的情况下，pageX 和pageY 的值与clientX 和clientY 的值相称。IE8 及更早版本不支撑事宜对象上的页面坐标，不过运用客户区坐标和转动信息可以计算出来。
鼠标事宜发作时，不仅会有相关于浏览器窗口的位置，另有一个相关于全部电脑屏幕的位置。而经由过程screenX 和screenY属性就可以肯定鼠标事宜发作时鼠标指针相关于全部屏幕的坐标信息
虽然鼠标事宜主假如运用鼠标来触发的，但在按下鼠标时键盘上的某些键的状况也可以影响到所要采用的操纵。这些修正键就是Shift、Ctrl、Alt 和Meta（在Windows 键盘中是Windows 键，在苹果机中是Cmd 键），它们经常被用来修正鼠标事宜的行动。DOM 为此划定了4 个属性，示意这些修正键的状况：shiftKey、ctrlKey、altKey 和metaKey。这些属性中包括的都是布尔值，假如响应的键被按下了，则值为true，不然值为false。
IE9、Firefox、Safari、Chrome 和Opera 都支撑这4 个键。IE8 及之前版本不支撑metaKey 属性

键盘与文本事宜

  1. keydown：当用户按下键盘上的恣意键时触发，而且假如按住不放的话，会反复触发此事宜。

  2. keypress：当用户按下键盘上的字符键时触发，而且假如按住不放的话，会反复触发此事宜。按下Esc 键也会触发这个事宜

  3. keyup：当用户开释键盘上的键时触发。

  4. textInput:DOM3 级事宜,这个事宜是对keypress的补充，意图是在将文本显现给用户之前更轻易阻拦文本。在文本插进去文本框之前会触发textInput 事宜,支撑textInput的浏览器有IE9+、Safari 和Chrome

在发作 keydown 和keyup 事宜时，event 对象的keyCode 属性中会包括一个代码，与键盘上一
个特定的键对应。对数字字母字符键，keyCode 属性的值与ASCII 码中对应小写字母或数字的编码相
同。因而，数字键7 的keyCode 值为55，而字母A 键的keyCode 值为65——与Shift 键的状况无关,详细怎样对应的可以本身测试或许百度.
DOM 和IE 的event 对象都支撑keyCode 属性

触摸事宜

  1. touchstart:当手指触摸屏幕时触发；纵然已有一个手指放在了屏幕上也会触发。

  2. touchmove:当手指在屏幕上滑动时一连地触发。在这个事宜发作时期，挪用preventDefault()
    可以阻挠转动

  3. touchend:当手指从屏幕上移开时触发。

每一个触摸事宜的event 对象都供应了在鼠标事宜中罕见的属性：
bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、
ctrlKey 和metaKey.

除了罕见的 DOM属性外，触摸事宜还包括以下三个用于跟踪触摸的属性。

  • touches：示意当前跟踪的触摸操纵的Touch 对象的数组。

  • targetTouchs：特定于事宜目标的Touch 对象的数组。

  • changeTouches：示意自上次触摸以来发作了什么转变的Touch 对象的数组。每一个 Touch 对象包括以下属性。

每一个 Touch 对象包括以下属性。

  • clientX：触摸目标在视口中的x 坐标。

  • clientY：触摸目标在视口中的y 坐标。

  • identifier：标识触摸的唯一ID。

  • pageX：触摸目标在页面中的x 坐标。

  • pageY：触摸目标在页面中的y 坐标。

  • screenX：触摸目标在屏幕中的x 坐标。

  • screenY：触摸目标在屏幕中的y 坐标。

  • target：触摸的DOM 节点目标。

    <div id='touchstart'></div>
    <div id='touchmove'></div>
    <div id='touchend'></div>

    EventUtil.addEventHandler(document,'touchstart',function(e){
        e = EventUtil.getEvent(e);
        document.getElementById('touchstart').innerHTML=e.type+':x='+e.changedTouches[0].clientX+',y='+e.changedTouches[0].clientY;
    });

    EventUtil.addEventHandler(document,'touchmove',function(e){
        e = EventUtil.getEvent(e);
        EventUtil.preventDefault(e);
        document.getElementById('touchmove').innerHTML=e.type+':x='+e.changedTouches[0].clientX+',y='+e.changedTouches[0].clientY;
    });
    
    EventUtil.addEventHandler(document,'touchend',function(e){

        e = EventUtil.getEvent(e);
        document.getElementById('touchend').innerHTML=e.type+':x='+e.changedTouches[0].clientX+',y='+e.changedTouches[0].clientY;
    });

HTML5事宜

  1. contextmenu: 支撑 contextmenu 事宜的浏览器有IE、Firefox、Safari、Chrome 和Opera 11+.

  2. beforeunload: IE 和Firefox、Safari 和Chrome 都支撑beforeunload 事宜.

  3. DOMContentLoaded: 构成完全的DOM 树以后就会触发，不剖析图象、JavaScript 文件、CSS 文件或其他资本是不是已下载终了.IE9+、Firefox、Chrome、Safari 3.1+和Opera 9+都支撑DOMContentLoaded 事宜，关于不支撑DOMContentLoaded 的浏览器，我们发起在页面加载时期设置一个时候为0 毫秒的超时挪用.

  4. readystatechange:IE 为DOM文档中的某些部份供应了readystatechange 事宜。这个事宜的目标是供应与文档或元素的加载状况有关的信息.

  5. pageshow,pagehide:Firefox 和Opera 有一个特征，名叫“往复缓存”（back-forward cache，或bfcache）,pageshow，这个事宜在页面显现时触发,pagehide该事宜会在浏览器卸载页面的时刻触发,pageshow,pagehide 事宜的event 对象还包括一个名为persisted 的布尔值属性。假如页面被保留在了bfcache 中，则这个属性的值为true.兼容性：Firefox、Safari 5+、Chrome 和Opera。

  6. hashchange:URL 的参数列表（及URL 中“#”号背面的一切字符串）发作变化时触发。兼容性:IE8+、Firefox 3.6+、Safari 5+、Chrome 和Opera 10.6+。

    //for item 3
    setTimeout(function(){
        //do something
    },0);

更改事宜

  1. DOMSubtreeModified：在DOM 构造中发作任何变化时触发。这个事宜在其他任何事宜触发后都邑触发。

  2. DOMNodeInserted：在一个节点作为子节点被插进去到另一个节点中时触发。

  3. DOMNodeRemoved：在节点从其父节点中被移除时触发。

  4. DOMNodeInsertedIntoDocument：在一个节点被直接插进去文档或经由过程子树间接插进去文档以后触发。这个事宜在DOMNodeInserted 以后触发。

  5. DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或经由过程子树间接从文档中移除之前触发。这个事宜在DOMNodeRemoved 以后触发。

  6. DOMAttrModified：在特征被修正以后触发。

  7. DOMCharacterDataModified：在文本节点的值发作变化时触发。

DOMSubtreeModified DOMNodeInserted DOMNodeRemoved兼容性:Firefox 3+ Safari 3+及Chrome IE9+

《Javascript之事宜(二)》内存和机能

影响内存和机能的要素：起首，每一个函数都是对象，都邑占用内存；内存中的对象越多，机能就越差。其次，必需事前指定一切事宜处置惩罚顺序而致使的DOM接见次数，会耽误全部页面的交互停当时候。
优化计划:经由过程事宜托付和移除事宜处置惩罚顺序.

事宜托付

<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
//传统做法
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event){
location.href = "http://www.wrox.com";
});
EventUtil.addHandler(item2, "click", function(event){
document.title = "I changed the document's title";
});
EventUtil.addHandler(item3, "click", function(event){
alert("hi");
});

//事宜托付

var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
});

移除事宜处置惩罚顺序

当页面的元素被替代前须要移除其事宜处置惩罚顺序,页面卸载前也须要移除事宜处置惩罚顺序(经由过程onunload 事宜处置惩罚顺序移除一切事宜处置惩罚顺序).由于页面卸载后有些浏览器依旧将事宜处置惩罚顺序保留在内存中,IE8 及更早版本在这类
情况下依旧是题目最多的浏览器，只管其他浏览器或多或少也有相似的题目.

<div id="myDiv">
<input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){

btn.onclick = null; //移除事宜处置惩罚顺序
document.getElementById("myDiv").innerHTML = "Processing..."; 

};
</script>
    原文作者：yuhualingfeng
    原文地址: https://segmentfault.com/a/1190000004004845
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞