JavaScript(元素创建、事件高级技巧)
程序员文章站
2022-07-04 20:05:36
...
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。