国产韩日影视精品_中文字幕一区二区三区在线不卡_久久亚洲综合色一区二区三区 _国产成人久久久

【六六互聯】長期出售【美國抗投訴服務器】【歐洲抗投訴服務器】【亞洲抗投訴服務器】

DOM事件

JavaScript 使我們有能力創建動態頁面

    JavaScript 使我們有能力創建動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發JavaScript函數的事件。比方說，我們可以在用戶點擊某按鈕時產生一個onClick 事件來觸發某個函數。

1．事件

  1. 1)   事件是文檔或者瀏覽器窗口中發生的，特定的交互瞬間。

  2. 2)   事件是用戶或瀏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。

  3. 3)   事件是javaScript和DOM之間交互的橋梁。

    你若觸發，我便執行——事件發生，調用它的處理函數執行相應的JavaScript代碼給出響應。典型的例子有：頁面加載完畢觸發load事件；用戶單擊元素，觸發click事件。

2．事件流

    事件發生時會在元素節點與根節點之間按照特定的順序傳播，路徑所經過的所有節點都會收到該事件，這個傳播過程即DOM事件流。

    事件傳播的順序對應瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流(如圖6-9兩種事件流)。

    冒泡型事件流：事件的傳播是從最特定的事件目標到最不特定的事件目標。即從DOM樹的葉子到根。

    捕獲型事件流：事件的傳播是從最不特定的事件目標到最特定的事件目標。即從DOM樹的根到葉子。

   事件捕獲的思想就是不太具體的節點應該更早接收到事件，而最具體的節點最后接收到事件。

 

<!DOCTYPE html>

 

<html>

 

<head>

 

     <meta charset="UTF-8">

 

     <title></title>

 

</head>

 

<body>

 

<div id="myDiv">Click me!</div>

 

</body>

 

</html>

 

上面這段html代碼中，單擊了頁面中的<div>元素，

在冒泡型事件流中click事件傳播順序為<div>—》<body>—》<html>—》document

在捕獲型事件流中click事件傳播順序為document—》<html>—》<body>—》<div>

JavaScript 使我們有能力創建動態頁面

JavaScript 使我們有能力創建動態頁面

圖5-11兩種事件流

3．事件句柄

    HTML 事件觸發瀏覽器中的行為，比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，可將之插入 HTML 標簽以定義事件的行為。

                                                                                       

 

屬性

 		 

此事件發生在何時...

 
 

onabort

 		 

圖像的加載被中斷。

 
 

onblur

 		 

元素失去焦點。

 
 

onchange

 		 

域的內容被改變。

 
 

onclick

 		 

當用戶點擊某個對象時調用的事件句柄。

 
 

ondblclick

 		 

當用戶雙擊某個對象時調用的事件句柄。

 
 

onerror

 		 

在加載文檔或圖像時發生錯誤。

 
 

onfocus

 		 

元素獲得焦點。

 
 

onkeydown

 		 

某個鍵盤按鍵被按下。

 
 

onkeypress

 		 

某個鍵盤按鍵被按下并松開。

 
 

onkeyup

 		 

某個鍵盤按鍵被松開。

 
 

onload

 		 

一張頁面或一幅圖像完成加載。

 
 

onmousedown

 		 

鼠標按鈕被按下。

 
 

onmousemove

 		 

鼠標被移動。

 
 

onmouseout

 		 

鼠標從某元素移開。

 
 

onmouseover

 		 

鼠標移到某元素之上。

 
 

onmouseup

 		 

鼠標按鍵被松開。

 
 

onreset

 		 

重置按鈕被點擊。

 
 

onresize

 		 

窗口或框架被重新調整大小。

 
 

onselect

 		 

文本被選中。

 
 

onsubmit

 		 

確認按鈕被點擊。

 
 

onunload

 		 

用戶退出頁面。

 

    onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網頁的正確版本。onload 和 onunload 事件可用于處理 cookie。 

 

<!DOCTYPE html>

 

<html>

 

<body onload="checkCookies()">

 

<script>

 

function checkCookies(){

 

if (navigator.cookieEnabled==true){

 

    alert("已啟用  cookie")

 

    }

 

else{

 

    alert("未啟用  cookie")

 

    }

 

}

 

</script>

 

<p>提示框會告訴你，瀏覽器是否已啟用 cookie。</p>

 

</body>

 

</html>

 

onchange事件常結合對輸入字段的驗證來使用。下面是一個如何使用onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。

 

<!DOCTYPE  html>

 

<html>

 

<head>

 

<script>

 

     function myFunction(){

 

       var  x=document.getElementById("fname");

 

       x.value=x.value.toUpperCase();

 

     }

 

</script>

 

</head>

 

<body>

 

請輸入英文字符：<input type="text" id="fname" onchange="myFunction()">

 

<p>當您離開輸入字段時，會觸發將輸入文本轉換為大寫的函數。</p>

 

</body>

 

</html>

 

    onmouseover 和 onmouseout 事件可用于在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。

 

<!DOCTYPE  html>

 

<html>

 

<body>

 

<div  onmouseover="mOver(this)" onmouseout="mOut(this)"

 

style="background:green;width:120px;height:20px;padding:40px;color:#ffffff;">

 

      把鼠標移到上面

 

</div>

 

<script>

 

function mOver(obj){

 

obj.innerHTML="謝謝"

 

}

 

function mOut(obj){

 

obj.innerHTML="把鼠標移到上面"

 

}

 

</script>

 

</body>

 

</html>