02.WEB前端~JavaScript事件機制與BOM和DOM

本文是上一篇文章的後續詳情點擊該鏈接,

#### 事件機制

可以被瀏覽器偵測到的人或者瀏覽器的行爲,人對瀏覽器或者瀏覽器對網頁做了什麼事,js可以根據不同行爲.綁定一些不同的響應代碼處理,讓瀏覽器和人的行爲之間有一個交互

屬性	當以下情況發生時，出現此事
onabort	圖像加載被中斷
onblur	元素失去焦點
onchange	用戶改變域的內容
onclick	鼠標點擊某個對象
ondblclick	鼠標雙擊某個對象
onerror	當加載文檔或圖像時發生某個錯誤
onfocus	元素獲得焦點
onkeydown	某個鍵盤的鍵被按下
onkeypress	某個鍵盤的鍵被按下或按住
onkeyup	某個鍵盤的鍵被鬆開
onload	某個頁面或圖像被完成加
onmousedown	某個鼠標按鍵被按下
onmousemove	鼠標被移動
onmouseout	鼠標從某元素移開
onmouseover	鼠標被移到某元素之上
onmouseup	某個鼠標按鍵被鬆開
onreset	重置按鈕被點擊
onresize	窗口或框架被調整尺寸
onselect	文本被選定
onsubmit	提交按鈕被點擊
onunload	用戶退出頁面

單擊事件

<body>
    <!-- 單擊事件  -->
    <input type="button" name="" id="" value="單擊事件" onclick="demo1()"/>
    <script type="text/javascript">
        function demo1(){
            alert("單擊事件已觸發");
        }
    </script>
</body>

雙擊事件

<input type="button" name="" id="" value="雙擊事件" ondblclick="demo1()"/>

鼠標事件

<body>
    <!-- 鼠標事件  -->
    <div style="width: 300px;height: 300px; background-color: red;" onmousemove="demo()"></div>
    <script type="text/javascript">
        function demo(){
            alert("鼠標事件已觸發");
        }
    </script>
</body>

認識BOM和DOM

什麼是BOM

BOM是Browser Object Model的簡寫，即瀏覽器對象模型。

BOM有一系列對象組成，是訪問、控制、修改瀏覽器的屬性的方法

BOM沒有統一的標準(每種客戶端都可以自定標準)。

BOM的頂層是window對象

什麼是DOM

DOM是Document Object Model的簡寫，即文檔對象模型。

DOM用於XHTML、XML文檔的應用程序接口(API)。

DOM提供一種結構化的文檔描述方式，從而使HTML內容使用結構化的方式顯示。

DOM由一系列對象組成，是訪問、檢索、修改XHTML文檔內容與結構的標準方法。

DOM標準是由w3c制定與維護。DOM是跨平臺與跨語言的。

DOM的頂層是document對象

BOM對象 window

Window 對象描述

Window 對象簡單理解就是把瀏覽器抽象成一個對象,它表示一個瀏覽器窗口或一個框架。在客戶端 JavaScript中，Window 對象是全局對象，所有的表達式都在當前的環境中計算。也就是說，要引用當前窗口根本不需要特殊的語法，可以把那個窗口的屬性作爲全局變量來使用。例如，可以只寫document，而不必寫 window.document。同樣，可以把當前窗口對象的方法當作函數來使用，如只寫
alert()，而不必寫 Window.alert()

Window對象屬性

屬性	描述
closed	返回窗口是否已被關閉。
defaultStatus	設置或返回窗口狀態欄中的默認文本。
document	對 Document 對象的只讀引用。請參閱 Document 對象
history	對 History 對象的只讀引用。請參數 History 對象
innerheight	返回窗口的文檔顯示區的高度。
innerwidth	返回窗口的文檔顯示區的寬度。
length	設置或返回窗口中的框架數量。
location	用於窗口或框架的 Location 對象。請參閱 Location 對象。
name	設置或返回窗口的名稱。
Navigator	對 Navigator 對象的只讀引用。請參數 Navigator 對象。
opener	返回對創建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部寬度。
pageXOffset	設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。
pageYOffset	設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。
parent	返回父窗口。
Screen	對 Screen 對象的只讀引用。請參數 Screen 對象。
self	返回對當前窗口的引用。等價於 Window 屬性。
status	設置窗口狀態欄的文本。
top	返回最頂層的先輩窗口。
window	window 屬性等價於 self 屬性，它包含了對窗口自身的引用。

Window 對象方法

alert()	顯示帶有一段消息和一個確認按鈕的警告框。
blur()	把鍵盤焦點從頂層窗口移開。
clearInterval()	取消由 setInterval() 設置的 timeout。
clearTimeout()	取消由 setTimeout() 方法設置的 timeout。
close()	關閉瀏覽器窗口。
confirm()	顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
createPopup()	創建一個 pop-up 窗口。
focus()	把鍵盤焦點給予一個窗口。
moveBy()	可相對窗口的當前座標把它移動指定的像素。
moveTo()	把窗口的左上角移動到一個指定的座標。
open()	打開一個新的瀏覽器窗口或查找一個已命名的窗口。
print()	打印當前窗口的內容。
prompt()	顯示可提示用戶輸入的對話框。
resizeBy()	按照指定的像素調整窗口的大小。
resizeTo()	把窗口的大小調整到指定的寬度和高度。
scrollBy()	按照指定的像素值來滾動內容。
scrollTo()	把內容滾動到指定的座標。
setInterval()	按照指定的週期（以毫秒計）來調用函數或計算表達式。
setTimeout()	在指定的毫秒數後調用函數或計算表達式。

三種彈框

<body>
    <input type="button" value="彈框A" onclick="demo1()">
    <input type="button" value="彈框B" onclick="demo2()">
    <input type="button" value="彈框C" onclick="demo3()">
    <script type="text/javascript">
        //三種彈框
        function demo1(){
            //含有確定按鈕的彈框
            window.alert("彈框A");
        }
        function demo2(){
            //含有確定和取消兩個按鈕的彈框
            var flag = window.confirm("是否刪除?");   //返回布爾值
            document.write(flag);
        }
        function demo3(){
            //含有輸入框和確認取消兩個按鈕的彈框
            var name =  window.prompt("請輸入暱稱");
            document.write(name);
        }
    </script>
</body>

計時器練習

<body>
    <span id="time"></span>
    <input type="button" value="停止時間" onclick="demo()"/>
    <script type="text/javascript">
        function getTime(){
            var date = new Date();
            //獲得時間
            var time = date.toLocaleString();
            //獲得id名稱和span的對象
            var span = document.getElementById("time");
            span.innerHTML = time;
        }
        function demo(){
            //清除定時器
            window.clearInterval(inl);
        }
        //1秒之後進行方法調用,但只調用一次
        //window.setTimeout("getTime()",1000);
        //每間隔一秒就會調用方法一次
        var inl = window.setInterval("getTime()",1000);
    </script>
</body>

location對象:

//http://localhost:63342/Project/HTML/Project.html
var href = window.location.href;
//localhost
var hostname = window.location.hostname;
//63342
var port = window.location.port;
//localhost:63342
var host = window.location.host;
//刷新按鈕
window.location.reload();

History對象:

<body>
    <input type="button" value="history" onclick="demo()"/>
    <input type="button" value="history" onclick="testScreen()"/>
    <input type="button" value="history" onclick="testNavigator()"/>
    <script type="text/javascript">
        function demo() {
            //返回瀏覽器歷史列表中的URL數量
            var len = window.history.length;
            alert(len);
            //前進操作,前進一個網頁
            window.history.forward();
            //後退操作,後退一個網頁
            window.history.back();
            //前進或後退多個
            window.history.go(5);//正數前進,負數後退.0爲刷新
        }
        function testScreen(){
            //獲得當前屏幕的分辨率
            var he = window.screen.height;  //高度
            var wi = window.screen.width;   //寬度
            alert(he + "-----" + wi);
        }
        function testNavigator(){
            //用戶代理
            var us = window.navigator.userAgent;
            alert(us);
        }
    </script>
</body>

open和close方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun1(){
				window.open("http://www.baidu.com")
			}
			function fun2(){
				window.close()
			}
		</script>
	</head>
	<body>
		<input type="button" value="open" onclick="fun1()" />
		<input type="button" value="close" onclick="fun2()" />
	</body>
</html>

screen和navigator

screen代表屏幕,navigator代表瀏覽器軟件本身,通過這兩個對象可以獲得屏幕和瀏覽器軟件的一些信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun(){
				console.info(window.screen.width)
				console.info(window.screen.height)
				console.info(navigator.userAgent)
				console.info(navigator.appName)
			}
		</script>
	</head>
	<body onload="fun()">
	</body>
</html>

DOM編程

什麼是DOM編程

簡單來說:DOM編程就是使用document對象的API完成對網頁HTML文檔進行動態修改,以實現網頁數據和樣式動態變化效果的編程.

什麼是document

document對象代表整個html文檔，可用來訪問頁面中的所有元素，是最複雜的一個dom對象，可以說是學習好dom編程的關鍵所在。

DOM編程獲得節點的方式

HTML

<body>
        <form action="">
            用戶名: <input type="text" name="username" id="username" value="請輸入用戶名"/><br/>
            密&nbsp;碼:<input type="password" name="pwd" id="pwd" value="請輸入密碼"/><br/>
            愛好:<input type="checkbox" name="hobby" value="music"/> 音樂
                 <input type="checkbox" name="hobby" value="sports"/>體育
                 <input type="checkbox" name="hobby" value="art"/> 美術 <br/>
            職業: <select name="professional" id="professional">
                        <option>工人</option>
                        <option>農民</option>
                        <option>程序員</option>
                        <option>解放軍</option>
                  </select><br/>
            <input type="button" value="提交" onclick="demoPlus()"/>
        </form>
</body>

JavaScript操作

直接獲得

<script type="text/javascript">
    //-------直接獲得節點對象的方式-------
    function demo(){
    //id方式直接獲得----單個對象
    var username = document.getElementById("username");
    alert(username);
}
function demoS(){
    //通過標籤名稱來獲得我們元素的對象
    var inp = document.getElementsByTagName("input");
    alert(inp.length);
}
function demoPlus(){
    //通過name獲得我們元素的對象
    var name = document.getElementsByName("hobby");
    alert(name.length);
}
</script>

間接獲得

//-------直接獲得節點對象的方式-------
function demo(){
    var professional = document.getElementById("professional");
    //獲得對應的子元素   注意:空白的文檔也是一個子節點
    var child = professional.childNodes;
    alert(child.length);    //9
}
function demoS(){
    var p2 = document.getElementById("p2");
    //獲得父節點
    var par = p2.parentNode;
    alert(par.length);  //4
}
function demoPlus(){
    var p2 = document.getElementById("p2");
    //獲得下一個節點 包含空白文檔
    //var next = p2.nextSibling.nextSibling;
    var next = p2.nextElementSibling;   //不包含空白文檔
    var up = p2.previousSibling;    //上一個節點對象,包含空白文檔
    var Up = p2.previousElementSibling; //不包含空白
    alert(next);    //text
}

DOM操作屬性

<body>
    <input type="text" id="inpl" value="張三" name="uname"/><hr/>
    <input type="button" name="" id="" value="測試元素屬性" onclick="demo()"/>
    <script type="text/javascript">
        function demo(){
            //獲得id名稱是inpl的節點
            var inpl = document.getElementById("inpl");
            //獲得節點對象的屬性
            var ty = inpl.type;		//true
            var va = inpl.value;	//張三
            var na = inpl.name;		//uname
            alert(ty + " " + va + " " + na);
        }
    </script>
</body>

操作屬性

方法一(常用)

//操作元素的屬性
inpl.type="button";
inpl.value="測試改變";

方法二

//獲得元素的屬性
var ty1 = inpl.getAttribute("type");
var var2 = inpl.getAttribute("value");
//操作元素的屬性
inpl.setAttribute("type","button");

DOM操作樣式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  demo1(){
				//獲得id名稱是div1的對象
				var div =document.getElementById("div1");
				//獲得css樣式  只是支持行內樣式的css
				var  wi=div.style.width;
				var  hi=div.style.height;
//				alert(wi+"----"+hi);
				//操作元素的css樣式    對於 background-color格式的樣式在js中需要使用駝峯規則進行改變
				div.style.width="300px";
				div.style.height="300px";
				div.style.backgroundColor="red";
				//通過增加class類來增加對應的css樣式   注意：className 
				div.className="div2";
			}
		</script>
		<style>
			.div2{	
				border: 3px solid  green;
			}
		</style>
	</head>
	<body>
		<div id="div1"  style="width: 200px; height: 200px; background-color: palegreen;"></div>
		<hr />
		<input type="button" name="" id="" value="css樣式的操作" onclick="demo1()" />
	</body>
</html>

DOM操作文本的和值

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        #div1{
            width:200px;
            heigh:200px;
            border:2px solid red;
        }
    </style>
    <script type="text/javascript">
        function demo(){
            //獲得div的對象
            var div = document.getElementById("div1");
            //獲得元素的文本內容
            //獲得HTML的內容包括標籤
            var inn = div.innerHTML;    //<span>我們不一樣</span>
            //只會獲得文本信息
            var inn2 = div.innerText;   //我們不一樣
            //console.log(inn + " " + inn2);
           // div.innerHTML="<h1>我們沒有什麼不一樣</h1>"; //會識別HTML信息
            //不會識別HTML信息,會把標籤當成文本內容原封不動的輸出
            div.innerText += "<h1>我們沒有什麼不一樣</h1>";//使用+=就是追加,=就是覆蓋
            /*
                雙標籤innerHTML 和 innerText
                單標籤獲得的時候都是用value獲得
                特殊的標籤:select,textarea
             */
        }
        function demo2(){
            //獲得select對象
            var sel = document.getElementById("sele");
            alert(sel.value);
        }
        function  demo3(){
            var  te= document.getElementById("tex");
            alert(te.value);
        }
    </script>
</head>
<body>
    <div id="div1">
        <span>我們不一樣</span>
    </div>
    <input type="button" onclick="demo()" value="顯示"/>
    <input type="text" name="inp2" id="inp2" value=""/>
    <!--  特殊的操作  -->
    <select id="sele" onchange="demo2()">
        <option value="0">選擇</option>
        <option value="1">中國</option>
        <option value="2">美國</option>
        <option value="3">法國</option>
    </select><br/>
        <textarea rows="20" cols="20" id="tex"></textarea>
        <input type="button" value="操作元素的文本內容" onclick="demo3()"/>
</body>
</html>

DOM操作元素節點對象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function  addNode(){
            //獲得表單對象
            var  fom=document.getElementById("fom");
            //創建節點的方法
            var  p=	document.createElement("p");
            p.innerText="照片： "
            var  inp=document.createElement("input");
            inp.type="file";
            var  inp2=document.createElement("input");
            inp2.type="button";
            inp2.value="刪除";
            inp2.onclick=function(){
                //移除子節點；
                p.removeChild(inp);
                p.removeChild(inp2);
                //移除本身
                p.remove();
            }
            //添加節點對象
//		     fom.appendChild(p);
            //獲得最後一個節點對象
            var  lastNode=document.getElementById("lastNode");
            //在指定元素之前添加節點
            fom.insertBefore(p,lastNode);
            p.appendChild(inp);
            p.appendChild(inp2);
        }
    </script>
</head>
<body>
<form  id="fom">
    <p>
        用戶名：<input type="text" />
    </p>
    <p>
        照片：<input type="file" />
        <input type="button" value="添加"  onclick="addNode()"/>
    </p>
    <p id="lastNode">
        <input type="button" name="" id="" value="提交" />
        <input type="button" name="" id="" value="清空" />
    </p>
</form>
</body>
</html>