事件的默认、冒泡行为 + JSON-基础学习总结

最新推荐文章于 2022-05-23 10:02:36 发布

Amber_Flying

最新推荐文章于 2022-05-23 10:02:36 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/Amber_Flying/article/details/99705100

版权

事件的默认行为、冒泡行为

事件对象： event
属性：Target：获取触发事件对象
如：大框套按钮，给大框绑定点击事件；若点击大框触发事件，此时对象是大框；若点击按钮触发事件，此时对象时按钮；
属性： currentTarget：获取绑定触发事件的对象，谁绑定获得谁；
例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px black solid;
			}
		</style>
	</head>
	<body>
		<div id="wai" onclick="show1(event)">
			<button type="button">按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		function show1(e){
			var a=e.currentTarget;  //谁绑定了事件，点击谁才会使下面代码有效；
			a.style.background="red";
		}
	</script>
</html>

冒泡行为：是指多层嵌套时，都定义点击事件时，点击内层，会由内向外依次执行点击事件的操作；
stopPropagation() ：阻止冒泡行为
例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px black solid;
			}
		</style>
	</head>
	<body>
		<div id="wai" onclick="show1(event)">
			<div id="nei" style="width: 40px; height: 40px; border: 1px black solid;" onclick="show2(event)">	
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function show1(e){
			alert("wai");
			e.stopPropagation();
		}
		function show2(e){
			alert("nei");
			e.stopPropagation();
		}
	</script>
</html>

事件的默认行为
如：点击链接后，会进行页面跳转；
preventDefault()：阻止默认行为；
例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a href="boke5.html" onclick="show(event)" >点击进入</a>
	</body>
	<script type="text/javascript">
		function show(e){
			alert("点击一次")
			e.preventDefault();
		}
	</script>
</html>

什么是 JSON?

JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 *****
JSON 易于理解。
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据。

JSON 语法规则

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

JSON 数据 - 一个名称对应一个值

JSON 数据格式为键/值对，就像 JavaScript 对象属性。

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

“name”:“Runoob”

JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个键/值对：

{“name”:“Runoob”, “url”:“www.runoob.com”}

Var student ={name:"zhangsan",age:30}  /// student为一个JSON对象
获取JSON中的值，采用for in循环
for（key in json对象）
{
Alert(json[key]);
}

JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象：

“sites”:[ {“name”:“Runoob”, “url”:“www.runoob.com”}, {“name”:“Google”, “url”:“www.google.com”}, {“name”:“Taobao”, “url”:“www.taobao.com”} ]
在以上实例中，对象 “sites” 是一个数组，包含了三个对象。

JSON 字符串转换为 JavaScript 对象

JSON 在JS中看作的是对象
Java 把JSON格式看成是字符串
JSON字符串语法：外面必须是单引号，键是双引号
JSON字符串的格式必须是紧凑格式,不能美化

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = ‘{ “sites” : [’ + ‘{ “name”:“Runoob” , “url”:“www.runoob.com” },’ + ‘{ “name”:“Google” , “url”:“www.google.com” },’ + ‘{ “name”:“Taobao” , “url”:“www.taobao.com” } ]}’;

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text); //obj为一个JSON对象

var text = '{ "sites" : [' +     '{ "name":"Runoob" , "url":"www.runoob.com" },' +     '{ "name":"Google" , "url":"www.google.com" },' +     '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';      
obj = JSON.parse(text); 
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

对象转字符串
JSON.Stringify(json对象)