JS事件、Bom對象和Dom對象
主要內容
事件
? 事件 (Event) 是 JavaScript 應用跳動的心臟 ，進行交互，使網(wǎng)頁動起來。當我們與瀏覽器中 Web 頁面進行某些類型的交互時，事件就發(fā)生了。事件可能是用戶在某些內容上的點擊、鼠標經(jīng)過某個特定元素或按下鍵盤上的某些按鍵。事件還可能是 Web 瀏覽器中發(fā)生的事情，比如說某個 Web 頁面加載完成，或者是用戶滾動窗口或改變窗口大小。
? 通過使用 JavaScript ，你可以監(jiān)聽特定事件的發(fā)生，并規(guī)定讓某些事件發(fā)生以對這些事件做出響應。
作用
（1）驗證用戶輸入的數(shù)據(jù)。
（2）增加頁面的動感效果。
（3）增強用戶的體驗度
事件中的幾個名詞
事件源: 誰觸發(fā)的事件
事件名: 觸發(fā)了什么事件
事件監(jiān)聽: 誰管這個事情，誰監(jiān)視？
事件處理:發(fā)生了怎么辦
例如
闖紅燈 事件源:車 ; 事件名: 闖紅燈; 監(jiān)聽：攝像頭、交警 ; 處理:扣分罰款
單擊按鈕 事件源:按鈕; 事件名: 單擊; 監(jiān)聽:窗口 ; 處理:執(zhí)行函數(shù)
? 當我們用戶在頁面中進行的點擊動作，鼠標移動的動作，網(wǎng)頁頁面加載完成的動作等，都可以稱之為事件名稱，即：click、mousemove、load 等都是事件名稱，具體的執(zhí)行代碼處理，響應某個事件的函數(shù)。
<body onload="loadWindow();"></body>
<script>
function loadWindow(){
alert("加載窗體");
}
</script>
事件類型
? JavaScript可以處理的事件類型為：鼠標事件、鍵盤事件、HTML事件。
? http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查
? Window 事件屬性：針對 window 對象觸發(fā)的事件（應用到 <body> 標簽）
? Form 事件：由 HTML 表單內的動作觸發(fā)的事件（應用到幾乎所有 HTML 元素，但最常用在 form 元素中）
? Keyboard 事件 : 鍵盤事件
? Mouse 事件：由鼠標或類似用戶動作觸發(fā)的事件
? Media 事件：由媒介（比如視頻、圖像和音頻）觸發(fā)的事件（適用于所有 HTML 元素，但常見于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）
? 幾個常用的事件：
? <font color="red">onclick 、onblur 、onfocus 、onload 、onchange</font>
? <font color="red">onmouseover、onmouseout、onkeyup、onkeydown</font>
onload：當頁面或圖像加載完后立即觸發(fā)
onblur：元素失去焦點
onfocus：元素獲得焦點
onclick：鼠標點擊某個對象
onchange：用戶改變域的內容
onmouseover：鼠標移動到某個元素上
onmouseout：鼠標從某個元素上離開
onkeyup：某個鍵盤的鍵被松開
onkeydown：某個鍵盤的鍵被按下
事件流和事件模型
? 我們的事件最后都有一個特定的事件源，暫且將事件源看做是HTML的某個元素，那么當一個HTML元素產(chǎn)生一個事件時，該事件會在元素節(jié)點與根節(jié)點之間按特定的順序傳播，路徑所經(jīng)過的節(jié)點都會受到該事件，這個傳播過程稱為DOM事件流。
? 事件順序有兩種類型：**事件捕獲 **和 事件冒泡。
? 冒泡和捕獲其實都是事件流的不同表現(xiàn)，這兩者的產(chǎn)生是因為IE和Netscape兩個大公司完全不同的事件流概念產(chǎn)生的。（事件流：是指頁面接受事件的順序）IE的事件流是事件冒泡，Netscape的事件流是事件捕獲流。
事件冒泡
? IE的事件流叫做事件冒泡，即事件開始時由最具體的元素接受，然后逐級向上傳播到較為不具體的節(jié)點（文檔）。例如下面的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
? 如果點擊了頁面中的<div>元素，那么這個click事件會按照如下順序傳播：
? 1、<div>
? 2、<body>
? 3、<html>
? 4、document
? 也就是說，click事件首先在div元素上發(fā)生，而這個元素就是我們單擊的元素。然后，click事件沿DOM樹向上傳播，在每一級節(jié)點上都會發(fā)生，直到傳播到document對象。
? 所有現(xiàn)代瀏覽器都支持事件冒泡，但在具體實現(xiàn)上還是有一些差別。
事件捕獲
? Netscape提出的另一種事件流叫做事件捕獲，事件捕獲的思想是不太具體的節(jié)點應該更早接收到事件，而最具體的節(jié)點應該最后接收到事件。事件捕獲的用意在于在事件到達預定目標之前捕獲它。還以前面的例子為例。那么單擊<div>元素就會按下列順序觸發(fā)click事件：
? 1、document
? 2、<html>
? 3、<body>
? 4、<div>
? 在事件捕獲過程中，document對象首先接收到click事件，然后沿DOM樹依次向下，一直傳播到事件的實際目標，即<div>元素。
? 雖然事件捕獲是Netscape唯一支持的事件流模式，但很多主流瀏覽器目前也都支持這種事件流模型。盡管“DOM2級事件”規(guī)范要求事件應該從document對象開始時傳播，但這些瀏覽器都是從window對象開始捕獲的。
DOM 事件流
? “DOM2級事件”規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。首先發(fā)生的是事件捕獲階段，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-fh5086rc-1592291305575)(/圖片1dfgh.png)]
事件處理程序
? 事件就是用戶或瀏覽器自身執(zhí)行的某種動作。例如click、load和mouseover都是事件的名字，而響應某個事件的函數(shù)就叫做事件處理程序（或事件偵聽器）。事件處理程序的名字以“on”開頭，因此click事件的事件處理程序就是onclick，為事件指定處理程序的方式有好幾種。
HTML 事件處理程序
? 某個元素支持的每種事件，都可以用一個與相應事件處理程序同名的HTML特性來指定。這個特性的值應該是能夠執(zhí)行的JavaScript代碼：
<input type="button" value="Press me" onclick="alert('thanks');" />
? 這樣做有一些缺點，例如耦合度過高，還可能存在時差問題（當用戶點擊按鈕時，處理函數(shù)還未加載到，此時處理函數(shù)是單獨寫的一段js代碼），而且在不同的瀏覽器上可能會有不同的效果。
DOM0 級事件處理程序
? 通過JavaScript指定事件處理程序的傳統(tǒng)方式，就是將一個函數(shù)賦值給一個事件處理程序屬性。這種方式被所有現(xiàn)代瀏覽器所支持。這種方式首先必須取得一個要操作的對象的引用，每個元素都有自己的事件處理程序屬性，這些屬性通常全都小寫，例如onclick，然后將這種屬性的值設為一個函數(shù)，就可以指定事件處理程序了。例如：
<body>
<button id="myBtn">按鈕</button>
<script type="text/javascript">
var btn = document.getElementById('myBtn');
btn.onclick = function(){
console.log('you click a button');
}
</script>
</body>
? 以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。而且，只能為同一個元素的同一個事件設定一個處理程序（覆蓋），也可以通過刪除DOM0級方法指定的事件處理程序，只要將屬性值設為null即可：
btn.onclick = null;
DOM2 級事件處理程序
? “DOM2級事件”定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節(jié)點都包含這兩個方法，并且他們都接受3個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true，則表示在捕獲階段調用事件處理程序；如果是false則表示在冒泡階段調用事件處理程序。
<body>
<button id="myBtn">按鈕</button>
<script type="text/javascript">
var btn = document.getElementById('myBtn')
btn.addEventListener('click',function(){
alert('you add a eventListener by DOM2')
},false)
btn.addEventListener('click',function(){
alert('you add a eventListener by DOM2 again')
},false)
function thread(){
alert('you add a eventListener by DOM2 第三次')
}
btn.addEventListener('click',thread,false)
btn.removeEventListener('click',thread,false)
</script>
</body>
? 這種方式可以為同一個元素的同一個事件添加多個處理函數(shù)。還可刪除事件處理函數(shù)，注意，在刪除的時候，不能刪除匿名處理函數(shù)。
本節(jié)作業(yè)
1. 常用的幾種事件
2. 綁定事件的幾種方式
BOM對象
? BOM的核心對象是window，它表示瀏覽器的一個實例。window對象有雙重角色，它既是通過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規(guī)定的Global對象。這意味著在網(wǎng)頁中定義的任何一個對象、變量和函數(shù)，都以window作為其Global對象，因此有權訪問parseInt()等方法。如果頁面中包含框架，則每個框架都擁有自己的window對象，并且保存在frames集合中。在frames集合中，可以通過數(shù)值索引（從0開始，從左至右，從上到下）或者框架的名稱來訪問相應的window對象。
Window對象方法
系統(tǒng)對話框
? 瀏覽器通過（實際是window對象的方法）alert()、confirm()、prompt()方法可以調用系統(tǒng)對話框向用戶顯示消息。
（1）消息框:alert， 常用。
alert() 方法用于顯示帶有一條指定消息和一個 OK 按鈕的警告框。
（2）輸入框:prompt，返回提示框中的值。
prompt() 方法用于顯示可提示用戶進行輸入的對話框。
參數(shù)（可選）：
第一個參數(shù)：要在對話框中顯示的純文本。
第二個參數(shù)：默認的輸入文本。
（3）確認框:confirm，返回 true/false.
confirm() 方法用于顯示一個帶有指定消息和 OK 及取消按鈕的對話框。
<style type="text/css">
#aa{
border: 1px solid red;
height: 100px;
}
</style>
<body>
<div id="aa">
This is a div
</div>
<button onclick="testAlert();">警告</button>
<button onclick="testComfirm();">修改</button>
<button onclick="testPrompt();">輸入</button>
<script type="text/javascript">
// 1.警告框
function testAlert(){
alert('警告框！?。?);
}
/*
2.輸入框
返回值：輸入的內容
* */
function testPrompt(){
var item = prompt('請輸入年齡'); // item得到輸入的值
// console.log(item)
// alert(prompt('請輸入年齡',18)); // 將輸入的值輸出
}
/*
3.確認框
返回值：boolean（true|false）
* */
function testComfirm(){
var result = confirm('真的要改嗎？');
if(result){
var ele = document.getElementById("aa");
ele.style.color="red";
ele.innerHTML="<span>fdsfsd</span>";
}else{
alert("沒事別瞎點。。。");
}
}
</script>
</body>
打開窗口
? window.open()方法既可以導航到一個特定的URL也可以用來打開一個新的窗口
<script type="text/javascript">
function openBaidu(){
window.open('http://www.baidu.com','_self'); // _self、_blank等
// window.open(); //空白窗口
}
</script>
<input type="button" name="open" value="百度" onclick='openBaidu();' />
關閉窗口
? window.close()：關閉窗口。
? 例：點擊按鈕關閉當前窗口。
<input type="button" value="關閉窗口" onclick="window.close();" />
時間函數(shù)
setTimeout()
? setTimeout() : 在指定的毫秒數(shù)后調用函數(shù)或計算表達式。返回一個唯一的標識；也可以通過返回的標識cliearTimeout(id)： 來清除指定函數(shù)的執(zhí)行。
var id = setTimeout(function,times);
clearTimeout(id);
示例：
<script type="text/javascript">
// 延遲3 秒后出現(xiàn) alert
function hello() {
alert("對不起, 要你久候");
}
setTimeout("hello()", 3000);
// 時間顯示器
var timeout;
function init(){
// 拿到當前時間
var date = new Date();
var time = date.toLocaleString();
// 拿到相應對象
var h1 = document.getElementById('h1');
// 根據(jù)需求添加樣式
if(0==date.getSeconds()){ // 當時間的秒數(shù)變成0時，顯示紅色字體
h1.innerHTML = '<span style="color:red">' + time + '</span>';
} else {
h1.innerHTML = time;
}
/*
* 定時操作，只執(zhí)行一次
第一個參數(shù)：執(zhí)行的方法；第二個參數(shù)：定時，單位是毫秒
* */
setTimeout(init,1000); // 等多少時間來執(zhí)行
}
// window.setTimeout(init,1000);// 只執(zhí)行一次
// 停止操作
function stopShow () {
clearTimeout(timeout);
}
</script>
<body onload="init();">
<h1 id="h1"></h1>
<button onclick="stopShow()">時間停止</button>
</body>
? 在times毫秒后執(zhí)行function指定的方法，執(zhí)行之前也可以取消
setInteval()
? setInterval():可按照指定的周期（以毫秒計）來調用函數(shù)或計算表達式，也可根據(jù)返回的標識用來結束。該方法會不停地調用函數(shù)，直到 clearInterval() 被調用或窗口被關閉。
var id = setInterval(function,times);
clearInterval(id);
function test(){
console.log(".....");
}
// window是一個全局對象，通過全局對象調用setInterval()函數(shù)
window.setInterval(test,1000);
history對象
? history 對象是歷史對象。包含用戶（在瀏覽器窗口中）訪問過的 URL。history 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。
? history對象的屬性：length，返回瀏覽器歷史列表中的 URL 數(shù)量。
? history對象的方法：
? back()：加載 history 列表中的前一個 URL。
? forward()：加載歷史列表中的下一個 URL。當頁面第一次訪問時，還沒有下一個url。
? go(number|URL): URL 參數(shù)使用的是要訪問的 URL。而 number 參數(shù)使用的是要訪問的 URL 在 History 的 URL 列表中的相對位置。go(-1)，到上一個頁面
013-history.html
<body>
<a href="013-history-a.html">013-history-a.html</a>
<h1>我是第一個頁面</h1>
<input type="button" value="前進" onclick="window.history.forward();" />
<script>
console.log(window.history);
</script>
</body>
013-history-a.html
<body>
<a href="013-history-b.html">013-history-b.html</a>
<h1>我是A頁面</h1>
<input type="button" value="后退" onclick="window.history.back();"/>
</body>
013-history-b.html
<body>
<h1>我是B頁面</h1>
<input type="button" value="第一個頁面" onclick="window.history.go(-2);"/>
<input type="button" value="后退" onclick="window.history.back();"/>
</body>
location對象
? location 對象是window對象之一，提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。也可通過 window.location 屬性來訪問。
? location 對象的屬性 href：設置或返回完整的 URL
? location 對象的方法
? reload()：重新加載當前文檔。
? replace()：用新的文檔替換當前文檔。
<script type="text/javascript">
function openBaidu(){
// 沒有歷史記錄,用新的文檔替換當前文檔
// window.location.replace("http://www.baidu.com");
// console.log(window.location.href); // 獲取完整的url
window.location.;
}
</script>
<body>
<input type="text" value="" />
<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" value="百度" onclick="openBaidu();" />
</body>
本節(jié)作業(yè)
- 實現(xiàn)時間計時功能
- JS的跳轉方式
