Event事件（2）及Json对象

最新推荐文章于 2025-08-06 21:21:04 发布

原创最新推荐文章于 2025-08-06 21:21:04 发布 · 867 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Json

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

Event事件（2）
1.事件委托：
把一个事件让别的元素去做（当为某些元素添加相同的事件时，可以为这些元素的父元素添加该事件）。
优点：
①提高程序的执行效率
②动态创建的元素添加事件可以在动态创建的函数外面添加事件。
③冒泡或者捕获都可以产生事件委托。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="创建li" id="btn" />
		<ul>
			<li>孩子多个1</li>
			<li>孩子多个2</li>
			<li>孩子多个3</li>
			<li>孩子多个4</li>
			<li>孩子多个5</li>
			<li>孩子多个6</li>
			<li>孩子多个7</li>
			<li>孩子多个8</li>
			<li>孩子多个9</li>
			<li>孩子多个10</li>
		</ul>
	</body>
</html>
<script>
	oUl.addEventListener("click",function(e){
		var e = e || event;
		//this指向  ul
		//使用委托的关键：重新获取事件源
		var target = e.target || e.srcElement;
		if( target.tagName.toLowerCase() == "li" ){
			alert( target.innerHTML );
		}
	})
</script>

2.浏览器的一些默认行为
①：右键单击出现的菜单
②：超链接的默认跳转和刷新页面
③：form表单中的submit按钮，会刷新浏览器
④：浏览器的图片和被选中的文字，默认会被拖拽

3.取消浏览器默认行为
e.preventDefault();
e.returnValue = false;//兼容IE
兼容写法：
e.preventDefault ？ e.preventDefault（）： e.returnValue= false;
或者在函数的最后写return false；（return后什么都不执行了）

3.Json对象：
Json(javascript object notation)全称是javascript对象表示法，它是一种数据交换的文本格式，而不是一种编程语言，用于读取结构化数据。
作用：存储数据
Json简单的数据的存取：
①：简单值使用与JavaScript相同的语法，可以在JSON中表示字符串、数值、布尔值和null，字符串必须使用双引号表示，不能使用单引号。数值必须以十进制表示，且不能使用NaN和Infinity。
②：对象作为一种复杂数据类型，表示的是一组有序的键值对儿。而每个键值对儿中的值可以是简单值，也可以是复杂数据类型的值。
　　与javascript的对象字面量相比，json有三个不同的地方
　　1、JSON没有变量的概念
　　2、JSON中，对象的键名必须放在双引号里面
　　3、因为JSON不是javascript语句，所以没有末尾的分号

拖拽案例（百度登陆时候的扫描二维码界面可以拖动）：
思路：
1.需要通过三个事件完成 onmousedown 、onmousemove、onmouseup。
2.鼠标按下时需要记录按下时相对于操作后的元素的内部偏移量offsetX||offsetY
3.鼠标移动时设置物体的left和top值。left = pageX - offsetX；top = pageY - offsetY;
4.鼠标按键抬起时取消移动。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css">
		#box{
			height: 200px;width: 200px;background: skyblue;border-radius: 50%;
			cursor: move;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="box">
		
	</div>
</body>
</html>
<script type="text/javascript">
	box.onmousedown = function (e) {
		var e = e||event;
		var disx = e.offsetX || layerX;
		var disy = e.offsetY || layerY; 
		document.onmousemove = function (e) {
			var e = e || event;
			var x = e.pageX - disx;
			var y = e.pageY - disy;
			var maxX = window.innerWidth - 200;
			var maxY = window.innerHeight - 200;
			if (x < 0) {
				x = 0;
			}else if (x>maxX) {
				x = maxX;
			}
			if (y < 0) {
				y = 0;
			}else if (y>maxY) {
				y = maxY;
			}
			
			box.style.left = x+'px';
			box.style.top = y+'px';
		}
		document.onmouseup = function(){
			document.onmousemove = '';
		}
	}
</script>