事件对象：也是一个对象，这个对象里有事件触发时的相关信息
如何获取：在事件绑定的回调函数的第一个参数就是时间对象，一般命名为event,ev,e
元素.addEventListener('click',function(e){---------（e为事件对象）
})
部分常用属性
type：获取当前的事件类型
clietX/clietY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于DOM元素左上角的位置
key:用户按下键盘的值，不提倡keyCode
事件冒泡：
概念：当一个元素事件被触发到，同样的事件将会在该元素所有的祖先元素中依次触发
事件冒泡是默认存在的
事件捕获：
概念：从DOM的根元素开始去执行对应的事件(从外到里)
DOM：addEventListener（事件类型，事件处理函数，是否使用捕获机制）
事件委托
如果为父容器绑定事件，那么所有的子元素默认情况下都能触发这个事件，不管这个子元素是 已存在，还是将来创建的 这里是复用事件冒泡的原理，为父容器绑定事件，将来所有子元素都会事件冒泡给这个父容器
这种将事件绑定给父容器的做法让子元素也能响应事件--就叫做事件委托
方法： 1.将事件绑定给已存在的父容器，让子元素进行触发 2.它的复用了事件委托的原理，当子元素触发事件之后，会将事件冒泡给父容器 3.如果想对真正触发事件的元素进行处理，可以使用e.target获取当前真正触发事件的元素 4.如果子元素的操作不一样，需要通过判断，一般我们会对子元素添加一个标识，判断当前触发事件的元素是否有这个标识
<body>
<button>添加li元素</button>
<ul>
<li>我是第1个小li</li>
<li>我是第2个小li</li>
<li>我是第3个小li</li>
<li>我是第4个小li</li>
<li>我是第5个小li</li>
</ul>
<script>
// 如果为父容器绑定事件，那么所有的子元素默认情况下都能触发这个事件，不管这个子元素是 已存在，还是将来创建的
// 这里是复用事件冒泡的原理，为父容器绑定事件，将来所有子元素都会事件冒泡给这个父容器
// 这种将事件绑定给父容器的做法让子元素也能响应事件--就叫做事件委托
//获取数据
let ul = document.querySelector('ul')
let btn = document.querySelector('button')
// 绑定单击事件
btn.addEventListener('click', function () {
// 添加新元素
let newLi = document.createElement('li')
// 添加内容
newLi.innerText = '我是新来的'
// 追加元素
ul.appendChild(newLi)
})
ul.addEventListener('click', function (e) {
console.log(e);
if (e.target.localName == 'li') {
e.target.style.color = 'red'
}
})
</script>
</body>
以后业务处理的时候需要一个值，一般有两种方式获取到这个值： 1.传递参数 2.自己先存储再获取
元素操作一定要体现到数据 数据操作也要体现到元素
数据驱动视图，双向数据绑定
数据的渲染实现的步骤
前提：渲染必须需要 数据 和 静态结构 1.准备数据 2.准备好静态结构 3.数据一般是对象数组(数组里面的每个元素都是对象)，所以需要遍历拼接 定义一个字符串用于拼接 使用某种循环遍历数据源 拼接字符串，将数据进行替换 4.将拼接生成好的结构渲染到指定位置
USER模板
<body>
<h1>新增学员</h1>
<div class="info">
姓名：<input type="text" class="uname" /> 年龄：<input type="text" class="age" />
性别:
<select name="gender" id="" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary" /> 就业城市：<select name="city" id="" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</div>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>这是名称</td>
<td>这是年龄</td>
<td>这是性别</td>
<td>这是工资</td>
<td>这是所在城市</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
</tbody>
</table>
<script>
// 1. 准备好数据后端的数据
let arr = [
{
stuId: 1001,
uname: '欧阳霸天',
age: 19,
gender: '男',
salary: '20000',
city: '上海'
},
{
stuId: 1002,
uname: '令狐霸天',
age: 29,
gender: '男',
salary: '30000',
city: '北京'
},
{
stuId: 1003,
uname: '诸葛霸天',
age: 39,
gender: '男',
salary: '2000',
city: '北京'
}
]
//获取数据
let tbody = document.querySelector('tbody')
// 获取表单的值
let uname = document.querySelector('.uname')
let age = document.querySelector('.age')
let gender = document.querySelector('.gender')
let salary = document.querySelector('.salary')
let city = document.querySelector('.city')
let add = document.querySelector('.add')
function init() {
// 1.数据渲染:遍历数据，拼接结构，替换数据，填充到指定的dom结构中
let htmlStr = ''
// 遍历数据
arr.forEach(function (item, index) {
// 拼接结构，替换数据
htmlStr += `<tr>
<td>${index + 1}</td>
<td>${item.uname}</td>
<td>${item.age}</td>
<td>${item.gender}</td>
<td>${item.salary}</td>
<td>${item.city}</td>
<td>
<a href="javascript:" class="del" id="${item.stuId}">删除</a>
</td>
</tr>`
})
// 填充到指定的dom结构中
tbody.innerHTML = htmlStr
}
init()
// 实现数据新增
//1.准备好你新增的数据，添加到数据源
//2.渲染
add.addEventListener('click', function () {
// 1.收集数据，生成一个对象
let obj = {
// 获取表单元素的值 ，单击按钮之后再取值
stuId: arr.length > 0 ? arr[arr.length - 1].stuId + 1 : 1001,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value,
}
// 2.将生成的对象添加到数组
arr.push(obj)
// 3.渲染
init()
})
// 3.实现数据删除,动态渲染的元素（新增的元素，未来的元素），的事件绑定需要使用事件委托
tbody.addEventListener('click', function (e) {
// e.target当前用户点击的元素
// 只有单击了删除才是真正进行处理
if (e.target.className == 'del') {
// 获取你当前想删除的数据的id
let id = e.target.id
// 根据id找到对应索引
for (let i = 0; i < arr.length; i++) {
// 根据id找到对应索引
if (id == arr[i].stuId) {
arr.splice(i, 1)
console.log(id);
// 渲染
init()
}
}
}
})
</script>
</body>
