JavaScript(元素创建、事件高级技巧)

最新推荐文章于 2024-07-12 16:27:40 发布

退堂鼓职业选手

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量179

点赞数 2

分类专栏： B站学习记录学习记录JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45886797/article/details/119275582

版权

B站学习记录同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

学习记录JavaScript

9 篇文章 0 订阅

订阅专栏

JSday9

文章目录

JSday9

案例1 动态生成表格

数据是动态的，需要JS动态生成
所有的数据都是放到tbody的行里面
循环创建多行(对应数据行数)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		    <style>
		    *{
		        margin:0;
		        padding:0;
		    }
			table {
				width: 500px;
				margin: 100px auto;
				border-collapse: collapse;
				text-align: center;
			}
			td,
			th {
				border:1px solid black;
			}
			thead tr {
				height: 40px;
				background-color: #6495ED;
			}
		    </style>
		
	</head>
	<body>
		<table>
		    <thead>
		        <tr>
		            <th>姓名</th>
		            <th>科目</th>
		            <th>成绩</th>
		            <th>操作</th>
		        </tr>
		    </thead>
		    <tbody>
				
		    </tbody>
		</table>
		
		<script>
			//1,数据
			var datas = [
				{
					name:"张三",
					subject:"JavaScript",
					score:90
				},
				{
					name:"李四",
					subject:"JavaScript",
					score:80
				},
				{
					name:"王五",
					subject:"JavaScript",
					score:100
				}
			];
			//2,往tbody里面创建行，有几个人（通过数组的长度）我们就创建几行
			var tbody = document.querySelector('tbody');
			for(var i=0; i<datas.length; i++){
				var tr = document.createElement('tr');
				tbody.appendChild(tr);
				//3,往tr每一行里面创建单元格（跟数据有关系的3个单元格），td单元格的数量取决于每个对象的属性个数 for循环遍历对象 datas[i]
				for(var k in datas[i]){
					var td = document.createElement("td");  //创建单元格
					tr.appendChild(td);
					td.innerHTML=datas[i][k]; //把对象里面的属性值 datas[i][k]给td
				}
				//4，创建有删除二字的单元格
				 var td=document.createElement("td");
					tr.appendChild(td);
					td.innerHTML="<a href='javascript:;'>删除</a>";
			}
			//5,删除操作
			var as=document.querySelectorAll("a");
			    for(var i=0;i<as.length;i++)
			    {
			        as[i].onclick=function () {  //点击a 删除 当前a 所在的行
			            tbody.removeChild(this.parentNode.parentNode);
			        }
			    }
		</script>
	</body>
</html>

三种动态创建元素区别

document.write()

直接将内容写入页面的内容流，当文档流执行完毕，则它会导致页面全部重绘
element.innerHTML()

是将内容写入某个DOM节点，不会导致页面全部重绘。

创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂。
documen.createElement()

创建多个元素效率稍微较低，但结构更加清晰

事件高级技巧

注册事件(绑定事件)

给元素添加事件，称为注册事件或者绑定事件

注册事件的方式：传统方式和方法监听注册方式

传统注册方式

利用on开头的事件onclick

<button onclick="alert(hello)"></button>

btn.onclick = function(){}
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

w3c 标准推荐方式
addEventListener() 该方法
IE9之前的IE不支持该方法，可使用attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

eventTarget.addEventListener(type,listener[,useCapture])

将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定事件时，就会执行事件处理函数。里面的事件类型是字符串，必定加引号。

该方法接受三个参数

type:事件类型字符串，比如click、mouseover、注：这不需要on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。

退堂鼓职业选手

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
JavaScript(元素创建、事件高级技巧)

JSday9文章目录JSday9==案例1== 动态生成表格三种动态创建元素区别事件高级技巧注册事件(绑定事件)传统注册方式方法监听注册方式案例1 动态生成表格数据是动态的，需要JS动态生成所有的数据都是放到tbody的行里面循环创建多行(对应数据行数)<html> <head> <meta charset="utf-8"> <title></title> <style> *{
复制链接

扫一扫