Out of的考點簡明教程

一、out of的基本用法

Ⅰ.表示“在……外”之意：

1.The chemical plant is out of town.該化工廠在城外.

2.Our factory is 4 miles out of the city.我廠離城4英里.（指在城外,離城4英里.）

Ⅱ.表示“從……里”、“從……當中”之意：

1.We should remove the machine out of the room.我們應該把這臺記起從室內搬出去.

2.Pump as much air as possible out of the container.盡可能地把容器內的空氣都抽走.

3.You many choose one out of them.你可以從中選擇一個.

4.This is only one instance out of many.這只不過是許多例子中的一例而已.

5. There was something coming to her and she was waiting for it, fearfully. What was it? She did not know, it was too subtle and elusive to name. But she felt it, creeping out of the sky, reaching toward her through the sounds,the scents,the color that filled the air.

有種東西正向她靠近，而她正恐懼地等待著。那是什么?她不知道。那東西太微妙太難以捉摸了，她說不清楚。但是她能感覺得到它，它正悄無聲息地從天空中逸出，穿過彌漫于空氣中的聲音、氣味和顏色慢慢地向她靠近。（it指的是freedom）

Ⅲ.表示“接觸”、“脫離”、“沒有”、“缺乏”之意：

1.They have got out of many difficulties.他們已擺脫了許多困難.

2.The instrument went out of order.這個儀表發生故障.

3.That machine is out of repair.那臺機器失修了（或損壞了）.

4.Those devices are out of date.那些裝置過時了.

5.They were often out of spare parts before liberation.解放前他們常缺少備件.

6.It is out of comparison.這是無可比擬的.

7.A new method was introduced are old one naturally.采用了新方法,舊方法自然就淘汰了.

8.Their workshop has run out of oxygen.他們的車間已用完氧氣.

Ⅳ.表示來源、原因和動機之意：

1.He copied something new out of this book.他從這本書里摘抄了些新的內容.

2.They helped you out of pity.他們基于同情而幫助了你.

3.He went only out of curiosity.他僅僅是由于好奇心才去的.

4.He made this table out of an old box.他用一個舊木箱做成了這張桌子.

5.We did this out of necessary.我們出于需要做了這件事.

Ⅴ.表示“使……不……”和“使……取消……”之意：

1.We talked him out of his wrong plan.我們勸說他放棄他的錯誤計劃.

2.They argued her out of violating the operating rules.他們說服她別違反操作規程.

二、帶out of的一些常用詞組舉例（含義基本就是這個名詞的相反的意思）

out of balance 不平衡,失去平衡

to go out of control（hand）失去控制(無法收拾的)

out of doubt 無疑

out of focus 散聚

out of gear 混亂,發生故障

out of operation 不運轉

out of fashion 過時,陳舊

out of joint 脫節

out of step 不同步,不一致

out of stock 脫銷

out of touch 不接觸

out of practice 荒疏

out of work 失業

The axle is out of true.軸的部位不正了

out of sight看不見

out of work失業

out of order發生故障

out of many difficulties擺脫了許多困難

out of repair失修（或損壞）

out of style過時，不時髦

out of business破產

out of date 過時

out of the ordinary 不尋常的

out of touch 失去聯系

out of stock 脫銷

out of patience 不耐煩

out of breath上氣不接下氣，喘不過氣

out of the woods擺脫了前途不明，或危險的處境

Thank God he seems to be out of the woods now！他似乎渡過了危險期，真是謝天謝地。

out of the picture不再參與某項工程，或者退出某一行動

When I lived with my parents they had too many rules. These days I live by myself and can do as I please since they're now out of the picture. But I do miss them, so I visit them almost every weekend.

我以前和我父母一起住的時候，他們有好多規矩。現在我一個人住了，我愿意怎么做就怎么做，他們已經管不著了。但是，我很想他們，所以幾乎每星期都回去看望他們。

out of this world令人激動，精彩極了，絕妙的，特別是在形容音樂、電影的時候可以用

Say, I see that Gone with the Wind is on TV tonight. I've seen it ten times already but I'll watch it again. I think it's out of this world--maybe the best movie ever made！

喂，今天晚上電視上要放《飄》這部電影。我已經看過十遍了，但是我今天還要再看一遍。我認為這個電影實在是太精彩了，可能是所有電影當中最好的一部。

Donna took me to lunch at a restaurant in a shady woods just outside of town. We sat outdoors and the food tasted great. The place is so pretty and relaxed that it's really out of this world！

唐納帶我到近郊一個隱蔽在樹林里的飯館去吃午飯。我們坐在戶外。那里的飯菜色香味都好極了。那兒的環境非常漂亮和輕松。這實在是絕好的享受。

三、out of用法的注意點

Ⅰ.正確理解“from+out of+名詞”的意義：

1.We should remove the device from out of the room at once.我們應該立即搬到室外的那個裝置.

這里,介詞短語“out of+名詞”又作介詞from的賓語.上句原意是：我們應該立即把這個裝置從室外搬走.遇到這種“from+out of+名詞”的詞組,首先把“out of+名詞”理解為“……外”,并作為一個整體概念來看待,然后早套上from（從）的意思即行.再如：

2.He is from out of town.他是城外人.

先把out of town理解為一個整體概念,即“城外”,然后套上from（從……）含義 ,故全句也可譯為：他住在城外.

Ⅱ.根據有無其反義詞in,into的搭配關系來選擇和判斷out of的含義.例如：

1.This plant is in town.這個工廠在城里.

That plant is out of town.那個工廠在城外.

2.They are in danger.他們處境危險.

He is out of danger.他已脫險.

3.This kind machine comes into fashion.這種機器正風行一時.

That kind of machine came out of fashion.那種記起不風行了（或“過時了”）.

4.We talked him into making these experiments.我們勸說他做這些實驗.

They talked him out of making these experiments.他們勸說他別做這些實驗.

注：這種方法只能幫助我們選擇out of 在句中的具體意義,而不能認為任何out of用法都有 in,into作其反義詞.

Ⅲ.注意out of question和out of the question詞義差別很大：

1.This is out of question an example of an important principle that applies to all machines.（作狀語）這毫無疑問是適用于一切機械的一個重要原理的舉例.

2.In the first instance,increasing the temperature is out of the question.（起形容詞作用,作表語）在第一種情況下,提高溫度是不可能的.

比較：

①Your success is out of question.(你一定成功。)

②Your success is out of the question.(你必定失敗。)

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

事件有很多類型，不同的事件類型具有不同的信息；

DOM2級事件規定了下列5種事件：

UIEvent（user Interface，用戶界面）事件，在用戶與頁面上的元素交互時觸發；
MouseEvent鼠標事件，當用戶通過鼠標在頁面上執行操作時觸發；
KeyboardEvent鍵盤事件：通過鍵盤在頁面上執行操作時觸發；
HTML事件：當瀏覽器窗口發生變化或發生特定的客戶端/服務器交互時觸發；
MutationEvent變動事件：當底層DOM結構發生變化時觸發；

DOM3級在DOM2的基礎上重新定義了這些事件，并增加了一些事件：

FocusEvent焦點事件：當元素獲得或失去焦點時觸發；
WheelEvent滾輪事件：當使用鼠標滾輪（或類似設備）時觸發；
文本事件：當在文本中輸入文本時觸發；
合成事件：當為IME（Input Method Editor，輸入法編輯器）輸入字符時觸發；

HTML5規范也定義了大量的事件：歷史管理、拖放、跨文本通信，以及多媒體等事件；

除了這些事件，有些瀏覽器會在DOM和BOM中也實現其他專有事件；

從另外一個角度來分，事件大致可以分成幾大類：

依賴于設備的輸入型事件：這些事件依賴于特定的輸入設備，比如鼠標和鍵盤，也包括觸摸事件；例如，mousedown、mousemove之類的，只能通過鼠標設備，而keydown或keypress只能通過鍵盤設備，touchmove或gesturechange也只能通過觸摸設備實現；

獨立于設備的輸入型事件：不依賴于特定的輸入設備，比如click事件，既可以通過鼠標單擊實現，也可以通過鍵盤或觸摸設備實現；再如textinput事件，即可以通過鍵盤按鍵實現，也可以在剪切和粘貼實現，甚至通過手寫設備來實現；

用戶界面事件：通常指的是一些注冊在表單控件上的事件，例如文本框獲取焦點的focus事件，控件改變值的change事件或提交表單的submit事件；

狀態變化事件：表示某些生命周期或相關狀態的變化的事件，比如，文檔加載的load事件或DOMContentLoaded事件或文檔狀態readystatechange事件；再如HTML5的歷史管理的popstate事件，online或offline事件；

特定API事件：HTML5及相關的規范中定義的事件，例如：拖放事件，多媒體的相關事件；

UIEvent事件：

UIEvent事件表示簡單的用戶界面事件，但包含一些不一定與用戶操作有關的事件，主要與元素的焦點有關；

該事件類繼承自Event類；由其也派生出其他子類，如MouseEvent、TouchEvent、FocusEvent、KeyboradEvent、WheelEvent、InputEvent和CompositionEvent；

其自身定義了一些屬性，如：detail、layerX、layerY、pageX、pageY、sourceCapabilities、view和which；

UIEvent相關的事件：

DOMActive：表示元素已經被用戶操作（通過鼠標或鍵盤）激活時發生；
load：當頁面完全加載后在window上觸發，當所有框架都加載完畢時在框架集上觸發，當圖像加載完畢時在<img>元素上觸發，或者當嵌入的內容加載完成時在<object>元素上觸發；
unload：當頁面完全卸載后在window上觸發，當所有框架都卸載后在框架集上觸發，或者當嵌入的內容卸載完畢后在<object>元素上面觸發；
abort：當用戶停止下載過程時，如果嵌入的內容沒有加載完，則在<object>元素上觸發；
error：當發生Javascript錯誤時在window上觸發，當無法加載圖像時在<img>元素上面觸發，當無法加載嵌入內容時在<object>元素上觸發，或者當一或多個框架無法加載時在框架集上觸發；
select：當用戶選擇文本框（<input>或<textarea>）中的一或多個字符時觸發；
resize：當窗口或框架的大小變化時在window或框架上觸發；
scroll：當用戶滾動帶滾動條的元素中的內容時，在該元素上觸發；

以上這些事件，在DOM2級事件中，除了DOMActive之外，其他事件都屬于HTML事件，所以，在確定瀏覽器是否支持DOM2級事件，最后檢測一下，如：

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

確定瀏覽器是否支持DOM3級事件，如：

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

另外，這些事件，多數與window對象或表單控件相關，所以有些地方把這些事件也稱為window事件，就是因為這些事件的發生多數與瀏覽器窗口有關；

load加載事件：當頁面完全加載后（包括所有圖像、Javascript文件和CSS文件等外部資源），就會觸發window對象的load事件，這也是Javascript中最常使用的事件；

有兩種定義onload事件處理程序的方式：

window.addEventListener("load", function(event){
    console.log("Loaded");
    console.log(event);  // Event
},false);
// 或在IE10以下
window.attachEvent("onload", function(event){
    console.log("Loaded");
    console.log(window.event);
});

為<body>元素添加onload特性；

<body onload="console.log(event);">

一般來說，在window上發生的任何事件都可以在<body>元素中通過相應的特性來指定，因為在HTML中無法訪問window元素；

圖像也可以觸發load事件，無論是在DOM中的圖像還是在HTML中的圖像元素；

<img src="images/1.jpg" onload="alert('圖片已加載')" />

或：

var img = document.querySelector("img");
img.addEventListener("load", function(event){
    console.log(event.target.src);
});
// 或
EventUtil.addHandler(img, "load", function(event){
    event = EventUtil.getEvent(event);
    console.log(EventUtil.getTarget(event).src);
});

在創建新的<img>元素時，可以為其指定一個事件處理程序，只需要指定src屬性就可以下載，并不需要添加到DOM樹中，如：

window.addEventListener("load", function(event){
    var img = document.createElement("img");
    img.addEventListener("load", function(e){
        console.log(e.target.src);
    });
    img.src = "images/1.jpg";
    document.body.appendChild(img);
});
// 或者
EventUtil.addHandler(window, "load", function(){
    var img = document.createElement("img");
    EventUtil.addHandler(img, "load", function(event){
        event = EventUtil.getEvent(event);
        console.log(EventUtil.getTarget(event).src);
    });
    img.src = "images/1.jpg";
    document.body.appendChild(img);
});

還可以使用DOM0級的Image對象實現，如：

    // 把
    var img = document.createElement("img");
    // 換成
    var img = new Image();

還有一些元素也以非標準的方式支持load事件；在標準瀏覽器中，<script>元素也會觸發load事件，以確定動態加載的js文件是否加載完畢，在設置了<script>的scr屬性并且添加到文檔中，才會開始下載；

window.addEventListener("load", function(){
    var script = document.createElement("script");
    script.addEventListener("load", function(event){
        console.log(event.target.src);
    });
    script.src = "scripts/main.js";
    document.getElementsByTagName("head")[0].appendChild(script);
});
// 或
EventUtil.addHandler(window, "load", function(){
    var script = document.createElement("script");
    EventUtil.addHandler(script, "load", function(event){
        console.log(event);
        var target = EventUtil.getTarget(event);
        console.log(target.src);
    });
    script.src = "scripts/main.js";
    document.getElementsByTagName("head")[0].appendChild(script);
});

此時，event對象的target及currentTarget或srcElement引用都是<script>節點；

IE8及以下瀏覽器不支持<script>元素上的load事件，但以上代碼不會拋出異常；

瀏覽器還支持<link>元素上的load事件，如：

window.addEventListener("load", function(){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.addEventListener("load", function(event){
        console.log(event.target.href);
    });
    link.href = "styles/css.css";
    document.getElementsByTagName("head")[0].appendChild(link);
});

與<script>類似，指定其href屬性并且添加到文檔中才會下載；

unload事件：在頁面被完全卸載后觸發；或者從一個頁面切換到另一個頁面，或者刷新操作也會觸發unload事件，如：

<body onunload="alert('unload');">

拋出異常：blocked alert during unload，也就是頁面被阻塞了，而在unload事件處理中，是不允許阻塞的，諸如彈窗之類的，都會引起阻塞；正確的做法：

<body onunload="console.log('unload');">

或：

EventUtil.addHandler(window, "unload", function(event){
   console.log("unload");
});

unload事件特點：
unload事件的event對象只包含target（或srcElement）屬性，且值為document；
unload事件發生時的狀態應該是：
所有資源仍存在 (圖片, iframe 等.)
對于終端用戶所有資源均不可見；
界面交互無效 (window.open, alert, confirm 等，會引起阻塞)；
錯誤不會停止卸載文檔的過程；

unload事件執行時間很短，并且是在一切都被卸載之后才觸發，所以不適合處理常規代碼，一般是取消（或清除）該頁面上的對象引用，以避免內存泄漏；

var obj = {name:"wangwei",age:18};
window.addEventListener("unload", function(event){
    var oDiv = document.getElementById("mydiv");
    console.log(oDiv);
    var img = document.getElementsByTagName("img")[0];
    console.log(img);
    console.log(obj);
    obj = null;
console.log(obj);
debugger;
});
var obj = {name:"wangwei",age:18};
window.addEventListener("unload", function(event){
    localStorage.setItem("unload","頁面被unload了");
    localStorage.setItem("person", obj);
});

示例：統計一個頁面停留的時長，如：

window.addEventListener("load", function(){
    var start = new Date();
    console.log(start);
    window.addEventListener("unload", function(){
        var end = new Date();
        var duration = (end.getTime() - start.getTime()) / 1000;
        var pageView = {
            pageStayTime: duration,
            pageUrl: location.href
        };
        console.log("保存到數據庫中");
    });
});

另外，unload事件是不冒泡的，也是不可取消的；

同樣，DOM2級事件規定應該在<body>元素而非window對象上觸發unload事件，但所有瀏覽器都在window上實現了unload事件；

error事件：window.onerror屬性看起來像事件處理程序，并且當Javascript出錯時就會觸發它，但是，它并不是真正的事件處理程序，因為它的參數不是event對象，而是5個參數，由這5個參數可以獲取詳細的錯誤信息；

message：錯誤信息，描述錯誤的一條消息；
URL：引發錯誤的Javascript所在的文檔的URL；
line：文檔中發生錯誤的行數；
column：發生錯誤的列數；
error：錯誤對象，這個error也稱為全局錯誤對象；

window.onerror = function(sMessage, sUrl, sLine, sColumn, error){
console.log("Error:" + sMessage + " URL：" + sUrl + " Line：" + sLine + " Column：" + sColumn);
console.log(error);
    return true;
}

但如果使用DOM2級事件處理程序，其中的參數就是event對象；

window.onload = function(){
    num1 + num2;
}
window.addEventListener("error", function(event){
console.log(event);  // ErrorEvent
    return true;
});

ErrorEvent類繼承自Event類，其定義了如下屬性：

message：只讀，返回包含了所發生錯誤的描述信息；
filename：只讀，包含了發生錯誤的腳本文本的URL；
lineno：只讀，錯誤發生的行號；
colon：只讀，錯誤發生的列號；
error：只讀，發生錯誤時所拋出的Error對象；

這5個屬性也對應著window.onerror屬性的5個參數；

如果是圖片的onerror事件，就是一個真正的事件，其中只有一個參數，就是一個event對象；

var img = document.getElementsByTagName("img")[0];
img.onerror = function(event){
    console.log(event);  // Event type為error
}

abort事件：當一個資源的加載已中止時，將觸發該事件；

var video = document.querySelector("video");
videoSrc = "https://www.zeronetwork.cn/video.webm";
video.addEventListener("abort", function(event){
    console.log(event);
    console.log("下載中止：" + videoSrc);
});
var source = document.createElement("source");
    source.setAttribute("src", videoSrc);
    source.setAttribute("type", "video/webm");
    video.appendChild(source);
source.addEventListener("error", function(event){
    console.log(event);
    return true;
});

resize事件：當瀏覽器窗口的大小被調整，就觸發resize事件，該事件在window上觸發；

EventUtil.addHandler(window, "resize", function(event){
    console.log(event);
});

在標準瀏覽器中，event對象有target屬性，且值為window對象，但IE未提供任何屬性；

瀏覽器的大小改變1像素就會觸發resize事件，然后再隨著變化不斷重復觸發；

最大化或最小化窗口時，也會觸發resize事件；但是部分瀏覽器會在最大化或最小化時觸發兩次或以上的該事件，此時可以使用setTimeout()解決，也就是延遲執行某些代碼，如：

function callBack(){
    console.log("callBack");
}
window.addEventListener("resize", function(event){
    var target = this;
    if(target.resizeFlag)
        clearTimeout(target.resizeFlag);
    target.resizeFlag = setTimeout(function(){
        callBack();
        console.log("resize");
        target.resizeFlag = null;
    },200);
});

示例：隨窗口大小的變化而變化，如：

var mydiv = document.getElementById("mydiv");
var w = mydiv.clientWidth,
    h = mydiv.clientHeight,
    dx = w / h,
    dw = document.documentElement.clientWidth,
    scale = w / dw;
window.addEventListener("resize", function(event){
    var dw = document.documentElement.clientWidth;
    mydiv.style.width = dw * scale + "px";
    var w = mydiv.clientWidth;
    mydiv.style.height = w * dx * scale + "px";
    console.log(mydiv.style.width);
    console.log(mydiv.style.height);
});

示例：

<style>
*{margin:0;padding:0;}
.leftDiv,.rightDiv{
    width: 40%; overflow-y: scroll; float: left; margin-right: 10px; background-color: purple;
}
</style>
<div class="leftDiv">leftDiv ...</div>
<div class="rightDiv">rightDiv ...</div>
<script>
var leftDiv, rightDiv, dHeight;
window.addEventListener("load", function(){
    leftDiv = document.querySelector(".leftDiv");
    rightDiv = document.querySelector(".rightDiv");
    dHeight = document.documentElement.clientHeight;
    leftDiv.style.height = dHeight + "px";
    rightDiv.style.height = dHeight + "px";
});
window.addEventListener("resize", function(event){
    dHeight = document.documentElement.clientHeight;
    leftDiv.style.height = dHeight + "px";
    rightDiv.style.height = dHeight + "px";
});
</script>

resize事件目前只能注冊在window對象上，它不支持注冊在DOM元素上，如果要監聽DOM元素的resize事件，最好的方案就是使用自定義事件；

scroll事件:雖然是在window對象上發生，但它實際表示的是頁面中相應元素的變化；即可以在滾動窗口或其他元素時，跟蹤變化來確保某些內容一直在屏幕上可見；

window.addEventListener("scroll", function(event){
    console.log(event);  // Event
});

該事件對象并沒有提供滾動相關的信息，只是一個普通的Event的對象；

在混雜模式下，可以通過<body>元素的scrollLeft和scrollTop來監控到這一變化；在標準模式下，會通過<html>元素來反映這一變化；

window.onscroll = function(){
    console.log("x:" + document.documentElement.scrollLeft + ", y:" + document.documentElement.scrollTop);
}
// 或
window.addEventListener("scroll", function(event){
    if(document.compatMode == "CSS1Compat")
        console.log(document.documentElement.scrollTop);
    else
        console.log(document.body.scrollTop);
});

與resize事件類似，scroll事件會在文檔被滾動活動期間會被重復觸發，因此在scroll事件處理程序中盡量保持簡單的代碼；

scroll事件示例：

<div id="mydiv" style="width:200px;height:200px;background-color: purple; position: absolute;top:50px;right:50px;"></div>
<div style="height: 2000px; background-color:lightgreen;"></div>
<script>
window.onscroll = function(){
    var oDiv = document.getElementById("mydiv");
    oDiv.style.top = document.documentElement.scrollTop + "px";
}
</script>

scroll事件也可以注冊到Element元素上；如：

var oDiv = document.getElementById("mydiv");
console.log(oDiv.scrollHeight);
oDiv.addEventListener("scroll", function(event){
    // console.log(event);  // Event
    console.log(event.target.scrollTop);
});

事件防抖（debounce）和節流（throttle）：

防止事件被頻繁觸發；相關的事件有：mousemove、keydown、keypress、keyup、resize、scroll等；

防抖：觸發高頻事件后n秒內函數只執行一次，如果n秒內高頻事件再次觸發，則重新計算時間；如：

var timer = null;  // 創建一個標記用來存放定時器的返回值
window.addEventListener("resize", function(){
    if(timer){
        clearTimeout(timer);  // 每當resize時把之前的一個setTimeout清除
        timer = null;
    }
    if(!timer){
        timer = setTimeout(function(){ // 再創建一個新的定時器
            console.log("防抖");
        },500);
    }
});

在事件防抖中，清除定時器的時機很關鍵，必須在新定時器生成之前，如果在之后，會將所有定時器都清除，目標函數一次都不執行；或：

function debounce(callback, delay){
    var timeout = 0;
    return function(){
        var arg = arguments;
        // 一直觸發，就一直清除
        clearTimeout(timeout);
        // 直到事件不再觸發，最后一個定時器沒有清除,delay后就會執行定時器，
        // 如此，就確保只執行一次
        timeout = setTimeout(function(){
            callback.apply(this, arg);
        }, delay);
    };
}
function fn(e){
    console.log("fn" + e);
}
window.addEventListener("resize", debounce(fn, 500));

示例：輸入框驗證

function checkEmail(callback,delay){
    var t = null;
    return function(){
        var arg = arguments;
        clearTimeout(t);
        t = setTimeout(function(){
            callback.apply(this, arg);
        }, delay);
    }
}
function emailHander(e){
    var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if(!reg.test(e.target.value)){
        e.target.style.backgroundColor = "red";
        setTimeout(function(){
            e.target.style.backgroundColor = "";
        },800);
        console.log("格式不正確");
    }else{
        e.target.style.backgroundColor = "green";
        console.log("正確");
    }
}
var email = document.getElementById("email");
email.addEventListener("keyup", checkEmail(emailHander,800), false);

節流：防抖是多次觸發事件，目標函數只執行一次，不管觸發這些事件用了多少時間；而節流是在一定時間內只會執行一次，稀釋函數的執行頻率，進而達到緩慢執行目標函數的目的；如：

使用setTimeout()：

var timeoutId;
window.addEventListener("resize", function(event){
    if(!timeoutId){
        timeoutId = setTimeout(function(){
            console.log("延遲執行");  // 只執行一次
            clearTimeout(timeoutId); 
            // timeoutId = null;  // 換成這一句，500ms執行一次
        },500);
    }
});
// 或
function resizeHandler(event){
    // 先解除綁定
    window.removeEventListener("resize", resizeHandler);
    console.log(document.documentElement.clientWidth);
    // 重新綁定
    setTimeout(function(){
        window.addEventListener("resize", resizeHandler);
    },500);
}
window.addEventListener("resize", resizeHandler);

使用setInterval()：

將事件處理程序放在setInterval()函數中，每隔一段時間，去監測一次是否發生了scroll事件，然后執行，而scroll事件只是改變scrolled的值，不會影響性能，如：

var scrolled = false;
window.addEventListener("scroll", function(){
    scrolled = true;
});
setInterval(function(){
    if(scrolled){
        // 代碼處理
        console.log("scroll");
        scrolled = false;
    }
},500);

使用時間戳：

var startTime = new Date();
var flag = false;
var delay = 200;
window.addEventListener("resize", function(){
    startTime = new Date();
    if(flag === false){
        flag = true;
        setTimeout(resizeEnd, delay);
    }
});
function resizeEnd(){
    if(new Date() - startTime <= delay)
        setTimeout(resizeEnd, delay);
    else{
        flag = false;
        console.log(document.documentElement.clientWidth);
    }
}

或：

function thorttle(callback, delay){
    var timeout = 0;
    var now = new Date() - 0;
    return function(){
        var arg = arguments;
        var last = new Date() - 0;
        clearTimeout(timeout);
        if(last - now >= delay){
            now = last; // 將上次執行的時間賦值給now
        }else{
            // 目標函數在這里執行
            timeout = setTimeout(function(){
                callback.apply(this, arg);
            }, delay);
        }
    };
}
function fn(e){
    console.log("節流" + e);
}
window.addEventListener("resize", thorttle(fn, 500));

使用開關：

設置一個開關，一次只能有一個觸發執行，并對執行設置計時一段時間再執行，執行完畢之后再解鎖；如：滾動事件；

function loadMore(){
    var canRun = true;
    return function(){
        if(!canRun) return;
        canRun = false;
        setTimeout(function(){
            var docHeight = document.documentElement.offsetHeight; // 文檔高度
            var winHeight = window.innerHeight;  // 窗口高度
            var scrollDistance = document.documentElement.scrollTop; // 滾動距離
            // 當滾動到底部時
            if(docHeight - (winHeight + scrollDistance) <= 100){
                console.log("Loading...");
            }
            canRun = true;
        },600);
    }
}
window.addEventListener("scroll", loadMore());

兩者比較：

節流在某個時間段內，目標函數能執行一次，限制目標函數的執行頻率，不管事件觸發了多少次；

防抖是多次觸發事件，目標函數只執行一次，不管觸發了這些事件用了多少時間；

節流函數限制目標函數的執行頻率，有連續變化的效果，適用于關注變化過程的操作，可以調整目標函數執行頻率使得變化更加平滑，比如動畫、改變窗口時執行某些操作等，常用事件resize、scroll、mouseWheel、touchmove、mouseover等；

防抖函數適用于更關注結果的操作，不太關注操作過程，常見的事件有 input、keyup等；

FocusEvent焦點事件：

焦點事件會在頁面元素獲得或失去焦點時觸發，或某些對象調用了focus()和blur()方法也會觸發該事件；利用這些事件并與document.hasFocus()方法及document.activeElement屬性配合，可以知曉用戶在頁面上的行蹤；

有以下6個焦點事件：

blur：在元素失去焦點時觸發，該事件不會冒泡；
focus：在元素獲得焦點時觸發，該事件不會冒泡；
DOMFocusIn：在元素獲得焦點時觸發，該事件與HTML事件focus等價，但它冒泡；DOM3級事件廢棄了它，應使用focusin；FF及低版本的IE不支持；
DOMFocusOut：在元素失去焦點時觸發，該事件是HTML事件blur等價，但它冒泡；DOM3級事件廢棄了它，應使用focusout；FF及低版本的IE不支持；
focusin：在元素獲得焦點時觸發，該事件與HTML事件focus等價，但它冒泡；
focusout：在元素失去焦點時觸發，該事件是HTML事件blur等價，但它冒泡；

要確定瀏覽器是否支持這些事件，可以檢測：

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

可以獲得焦點事件的元素一般指的是window或表單控件或是超鏈接或是可編輯元素，稱為focusable元素；但在IE中普通元素也可以獲得焦點；

window.onblur = function(){ document.title = "你離開了";};
window.onfocus = function(){ document.title = "你來了";};
var oDiv = document.getElementById("mydiv");
oDiv.contentEditable = true;
// oDiv.tabIndex = 1;  // 或者添加tabIndex屬性也可以
oDiv.focus();
console.log(document.activeElement);
oDiv.addEventListener("focus", function(event){
    console.log(event.target.id);
});

這一類事件中最主要的兩個是focus和blur，它們都是Javascript早期就得到所有瀏覽器都支持的事件，這兩個事件的最大問題是它們不冒泡，因此，才出現了IE的focusin和focusout與Opera的DOMFocusIn和DOMFocusOut這兩對事件，后來IE的方式被DOM3級事件納為標準方式；

var btn = document.getElementById("btn");
btn.addEventListener("focus", function(event){
    console.log(event);  // FocusEvent
});

FocusEvent類：

表示和焦點相關的事件類，其繼承自UIEvent類；

其自身只添加了一個屬性relatedTarget，代表此次事件的相關目標，但在實用中，例如切換瀏覽器tab標簽時，為了安全起見，所有瀏覽器都會返回null；

當焦點從頁面中的一個元素移動到另一個元素，會依次觸發下列事件：

blur在失去焦點的元素上觸發、focusout在失去焦點的元素上觸發、DOMFocusOut在失去焦點的元素上觸發、focus在獲得焦點的元素上觸發、focusin在獲得焦點的元素上觸發、DOMFocusIn在獲得焦點的元素上觸發；但IE不遵循此順序；

function handler(event){
    console.log(event.target.id + ":" + event.type);
}
var btn = document.getElementById("btn");
btn.addEventListener("DOMFocusIn", handler, false);
btn.addEventListener("DOMFocusOut", handler, false);
btn.addEventListener("focus", handler, false);
btn.addEventListener("blur", handler, false);
btn.addEventListener("focusin", handler, false);
btn.addEventListener("focusout", handler, false);
btn.focus();
var txt = document.getElementById("txt");
txt.addEventListener("focus", handler, false);
txt.addEventListener("blur", handler, false);
txt.addEventListener("DOMFocusIn", handler, false);
txt.addEventListener("DOMFocusOut", handler, false);
txt.addEventListener("focusin", handler, false);
txt.addEventListener("focusout", handler, false);

其中，blur、DOMFocusOut和focusout的事件目標是失去焦點的元素，而focus、DOMFocusIn和focusin的事件目標是獲得焦點的元素；

另外，如果同時注冊了focusin和DOMFocusIn或focusout和DOMFocusOut，在IE中只會觸發focusin和focusout；

另外，除了focus和blur事件，其他事件只能通過DOM2級事件添加，如：

var btn = document.getElementById("btn");
btn.onfocusin = function(event){
    console.log(event);  // 不會觸發
};
btn.onDOMFocusIn = function(event){
    console.log(event);  // 不會觸發,IE會觸發
};

onfocusin和onfocusout事件，在HTML事件處理中，除FF，其它都支持；DOMFocusIn和DOMFocusOut，在HTML事件處理中，都不支持；

小應用：改變文本框樣式，如：

<style>
    .focusInput{border:1px solid purple;outline: none; background-color: rgba(0, 0, 0, .6);}
</style>
<script>
function focusInput(focusClass){
    var elements = document.getElementsByTagName("input");
    for(var i=0,len=elements.length; i<len; i++){
        var elt = elements[i];
        if(elt.type == "text"){
            elt.onfocus = function(){
                this.className = focusClass;
            };
            elt.onblur = function(){
                this.className = "";
            }
        }
    }
}
window.onload = function(){
    focusInput('focusInput');
}
</script>

focusin和focusout事件是冒泡的，因此可以使用事件代理，如：

<form id="myform" action="demo.jsp">
<input type="text" id="firstname" value="firstname" />    
<input type="text" id="lastname" value="lastname" />    
</form>
<script>
var myform = document.getElementById("myform");
myform.addEventListener("focusin", function(event){
    event.target.className = "focused";
});
myform.addEventListener("focusout", function(event){
    event.target.className = "";
});
</script>

示例：驗證數據，如：

<style>
    .invalid{border-color:red;}
    #error{color:red}
</style>
<p>郵箱：<input type="email" id="email" /></p>
<div id="error"></div>
<script>
var email = document.getElementById("email");
var error = document.getElementById("error");
email.addEventListener("blur", function(event){
    if(!event.target.value.includes("@")){
        event.target.classList.add("invalid");
        error.innerHTML = "請輸入正確的郵箱";
    }
});
email.addEventListener("focus", function(event){
    if(this.classList.contains("invalid")){
        this.classList.remove("invalid");
        error.innerHTML = "";
    }
});
</script>

或者使用focus()和blur()方法，如：

<style>
    .error{background-color: red !important;}
</style>
<p>郵箱：<input type="email" id="email" /></p>
<script>
var email = document.getElementById("email");
email.addEventListener("blur", function(event){
    if(!event.target.value.includes("@")){
        event.target.classList.add("error");
        event.target.focus();
    }else
        event.target.classList.remove("error");
});
</script>

示例：一個HTML編輯器；

<style>
.container,.editor{width:400px; height: 150px; display: block;}
.container{padding: 2px; border:1px solid;}
.editor{padding: 0; border:2px solid blue;}
.editor:focus{outline: none;}
</style>
<div id="container" class="container">
    <h1>Web前端開發</h1>
</div>
<script>
var area = null;
var container = document.getElementById("container");
container.addEventListener("click", function(event){
    editStart();
},false);
function editStart(){
    area = document.createElement("textarea");
    area.className = "editor";
    area.value = container.innerHTML;
    area.addEventListener("keydown", function(event){
        if(event.keyCode == 13)
            this.blur();
    },false);
    area.addEventListener("blur", function(event){
        editEnd();
    });
    container.replaceWith(area);
    area.focus();
}
function editEnd(){
    container.innerHTML = area.value;
    area.replaceWith(container);
}
</script>

當用戶按下Enter鍵或失去焦點時，<textarea>變回<div>，其內容在<div>中變為HTML；

DOM3級事件規定了以下幾類事件：

UI事件(UIEvents)，當用戶與頁面上的元素交互時觸發
焦點事件，當元素獲得或失去焦點時觸發
鼠標事件(MouseEvents)，當用戶通過鼠標在頁面上執行操作時觸發
滾輪事件()，當使用鼠標滾輪時觸發
文本事件，當在文檔中輸入文本時觸發
鍵盤事件(KeyboardEvent)，當用戶通過鍵盤在頁面上執行操作時觸發
合成事件，當為IME輸入字符時觸發
變動事件(MutationEvents)，當底層DOM結構發生變化時觸發

不同的事件類型具有不同的信息。此外，有些瀏覽器還會在DOM和BOM中實現其專有事件，HTML5還定義了一組事件。

我們可以通過document.createEvent(type)來創建一個事件（已有的事件或者自定義事件都可以）

// 創建一個事件
var event = document.createEvent("Event");
// 初始化事件的相關信息
event.initEvent("build", true, true);
// 元素可以監聽這個事件
el.addEventListener("build", function(e){
 // 做處理
}, false);
// 需要在腳本中觸發事件，就會執行相對應的回調
el.dispatchEvent(event);

1. UI事件

常見的UI事件有

load/unload
abort
error
select
resize
scroll

1.1 load/unload 事件

會觸發load事件的情況：

頁面完全加載后（包括所有外部資源），會觸發window上面的load事件
圖像的加載也會觸發load事件，無論是<img>標簽還是Image對象，但要注意的是在IE8及之前版本不會生成event對象。
在IE9+、firefox、opera、chrome、safari3+等瀏覽器中，<script>也會觸發load事件，以便開發人員確定動態加載的js文件是否加載完畢。
IE和Opera還支持<link>元素上的load事件

與load事件對應就是unload事件，這個事件在文檔被完全卸載后觸發，其實用戶從一個頁面切換到另一個頁面就會發生unload事件，而利用這個事件最多的情況是清除引用，以避免內存泄漏。

另外說明一點，通常我們會在頁面中看到：

<!DOCTYPE html>
<html>
 <head>
 <title>example</title>
 </head>
 <body onload="" onunload="">
 
 </body>
</html>

一般來說，在window上面發生的任何事件都可以在body元素中通過相應的屬性來指定，因為在HTML中無法訪問window對象，實際上，這只是為了保證向后兼容的一種權宜之計，但所有瀏覽器都能很好地支持這種方式。

1.2 resize事件

當瀏覽器窗口被調整到一個新的高度或寬度時，就會觸發resize事件，這個事件在window上面觸發。

瀏覽器窗口最小化或最大化時也會觸發resize事件。

resize事件可能會被頻繁觸發，瀏覽器會有一些機制來保證兩個resize事件觸發有一定的間歇（例如20ms），我們自己在處理的時候也要特別注意，詳情見函數節流。

1.3 scroll事件

scroll事件是在window對象上發生的，但它實際表示的則是頁面中相應元素的變化。
在混雜模式下，可以通過body元素的scrollLeft和scrollTop來監控這一變化。
在標準模式下，除了safari（仍然是通過body），所有瀏覽器都會通過html元素來反應這一變化。

window.addEventListener("scroll", function(e){
 if(document.compatMode == "CSS1Compat"){
 alert(document.documentElement.scrollTop);
 } else {
 alert(document.body.scrollTop);
 }
}, false);

需要注意的是，scroll事件在文檔被滾動期間會被重復地觸發，跟resize的處理類似。

2. 焦點事件

焦點事件會在頁面元素獲得或失去焦點時觸發，利用這些事件并與

document.hasFocus()
document.activeElement

就可以知曉用戶在頁面上的行蹤。

常見焦點事件共有：

blur：在元素失去焦點時觸發，這個事件不會冒泡，所有瀏覽器都支持
focus：在元素獲得焦點時觸發，這個事件不會冒泡，所有瀏覽器都支持
focusin：在元素獲得焦點時觸發，這個事件與HTML事件focus等價，但是會冒泡。支持的瀏覽器有IE5.5+、opera 11.5+、chrome、safari 5.1+
focusout：在元素失去焦點時觸發，這個事件與HTML事件blur等價，支持的瀏覽器有IE5.5+、opera 11.5+、chrome、safari 5.1+

DOMFocusIn和DOMFocusOut只有Opera支持，這里就不介紹。

當焦點從頁面中的一個元素移動到另一個元素時，會依次觸發下列事件：

focusout在失去焦點的元素中觸發
focusin在獲得焦點的元素中觸發
blur在失去焦點的元素上觸發
focus在獲得焦點的元素中觸發

3. 鼠標與滾輪事件

鼠標事件是Web開發中最常用的一類事件，常見的鼠標事件有：

click：在用戶單擊鼠標按鈕或者按下回車鍵時觸發。
dbclick：在用戶雙擊鼠標按鈕時觸發，在DOM3級事件納入了標準。
mousedown：在用戶按下了任意鼠標按鈕時觸發。
mouseenter：在鼠標光標從元素外部首次移動到元素范圍之內觸發，這個事件不冒泡，而且在光標移動到后代元素上不會觸發。
mouseleave：

在線咨詢

上一篇：前端之html_day01
下一篇：wxpython入門第六步（高級組件）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Out of的考點簡明教程

您的項目需求