js-事件模型

時間 2020-01-09

原文原文鏈接

1. 回調函數html

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。瀏覽器

字面上的理解，回調函數就是一個參數，將這個函數做爲參數傳到另外一個函數裏面，當那個函數執行完以後，再執行傳進去的這個函數。這個過程就叫作回調。函數

其實也很好理解對吧，回調，回調，就是回頭調用的意思。主函數的事先幹完，回頭再調用傳進來的那個函數。可是之前看過不少博客，他們老是將回調函數解釋的雲裏霧裏，很高深的樣子。spa

　　舉一個別人舉過的例子：約會結束後你送你女友回家，離別時，你確定會說：「到家了給我發條信息，我很擔憂你。」對不，而後你女友回家之後還真給你發了條信息。小夥子，你有戲了。其實這就是一個回調的過程。你留了個參數函數（要求女友給你發條信息）給你女友，而後你女友回家，回家的動做是主函數。她必須先回到家之後，主函數執行完了，再執行傳進去的函數，而後你就收到一條信息了。.net

2. HTML onload 事件屬性code

定義和用法

onload 屬性在對象已加載時觸發。htm

onload 經常使用在 <body> 中，一旦徹底加載全部內容（包括圖像、腳本文件、CSS 文件等），就執行一段腳本。對象

<!DOCTYPE html>
<html>
<script>
function load()
{
alert("頁面已加載！");
}
</script>
</head>

<body onload="load()">
<h1>Hello World!</h1>
</body>

</html>

3. onunload 事件blog

定義和用法

onunload 發生於當用戶離開頁面時發生的事件(經過點擊一個鏈接，提交表單，關閉瀏覽器窗口等等。)事件

注意： onunload 事件一樣觸發了頁面載入事件(+ onload 事件)。

4. DOM level 2 規範

除 IE 外大部分瀏覽器都遵照 DOM level 2 規範（實際上除了 IE 外其餘瀏覽器都基本遵照 W3C 制訂的各種規範），所以該套規範適用性最廣。 DOM 2 規定了一個 addEventListener 方法用來綁定監聽函數，該方法望文知意，直譯過來就是「增長事件監聽者」。該方法有三個參數(function addEventListener(event, fn, useCapture))： event 字符串類型的參數，表示要監聽的事件，不用加 on fn 事件觸發後執行的函數 useCapture 布爾型參數，按照何種事件流規範執行。爲 true 時表示使用事件捕獲，爲 false 時表示使用事件冒泡，通常使用 false。

用addEventListener()給一個元素綁定多個事件？

人

5. Javascript 定時器

頁面的一些動態效果都是經過定時器註冊不一樣的函數（這些函數改變着 HTML 和 CSS）來實現的。Javascript 提供了兩個定時器函數，他們最小的定時單位都是毫秒：

（1）setTimeout 函數會註冊一個回調函數並在若干毫秒後執行，只執行一次。該方法返回一個整型變量做爲此次註冊的 ID，fn 指要執行的函數（就是回調函數），能夠是一個通常函數的函數名(字符串類型)，也能夠是匿名函數。

setTimeout(function() {
	alert('你的小可愛忽然出現！');
}, 5000);

function notice() {
	alert('hi');
}

setTimeout (notice,1000);

（2）setInterval 函數會註冊一個回調函數並在若干毫秒後執行，不一樣的是他是每 x 毫秒執行一次，是週期性地循環執行的。該方法也返回一個整型變量，做爲此次註冊的 ID（該 ID 頗有用，由於註冊的函數是循環執行的，若是想中止繼續執行，須要清除此次註冊，使用 clearInterval 函數）。 fn 指要執行的函數（就是回調函數），能夠是一個通常函數的函數名(字符串類型)，也能夠是匿名函數 time 整型參數，表示每 time 毫秒執行一次 fn 函數一下代碼使用匿名函數實現了每 5 秒提示一個彈框：

setInterval (function() {
	alert('Five seconds have passed. What has Zhang Mengli learned?')
},5000);

在setInterval中註冊的回調函數能夠經過clearInterval來清除，清楚後將再也不被執行！

function clearInterval(id)

該參數是一個整型變量，指要清除的 ID，這個 ID 在 setInterval 函數中返回。

下面代碼實現了先註冊一個循環執行的函數，再清除它：

setInterval (function() {
	alert('Five seconds have passed. What has Zhang Mengli learned?')
},5000);
//代碼執行到這裏時註冊了一個每 5 秒執行一次的函數，函數功能是彈出一個彈框。
//下面將清除這個彈框

clearInterval(id);//執行上述代碼頁面不會有任何反應。由於彈框第一次彈出是在代碼執行後 5 秒，可是隨即（代碼順序執行，剛註冊完就清除先後可能不到 1 毫秒）被清除了，所以
沒來得及彈一個框出來