冒泡事件
<style>
.box{
width: 400px;
height: 400px;
background: blue;
}
.middle{
width: 300px;
height: 300px;
background: green;
}
.inner{
width: 200px;
height: 200px;
background: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="middle">
<div class="inner"></div>
</div>
</div>
<script>
// 冒泡事件 / 事件的传播
// 什么是冒泡事件:
// 子级标签触发事件,JavaScript中,父级程序,默认也会触发相同类型的事件
// 这样的效果,称为冒泡事件
// 只与标签在HTML中的层级关系有关,与css和显示效果无关
// 执行顺序,都是从当前标签向父级元素,执行
// 实际的标签的捕获顺序是有区别的
// IE浏览器是 从 子级向父级 获取标签,称为 冒泡机制
// 其他浏览器 是 从 父级向子级 获取标签,称为 捕获机制
// 虽然获取标签的方式不一样
// 但是现在所有的执行顺序都是从当前标签向父级标签执行
// 阻止事件的传播 / 阻止冒泡事件
// 事件对象.stopPropagation()
// 哪个标题有阻止冒泡事件代码,冒泡事件,执行就到这个标签为止
// 只触发自己身上的事件,不会触发父级标签,相同类型的事件
// 只管自己,谁写,谁不触发,子级父级,都不管,就自己触发自己的事件
// 兼容问题
// 低版本IE浏览器
// 事件对象.cancelBubble = true; 阻止冒泡事件,阻止事件的传播
// 兼容语法
/*
if(事件对象.stopPropagation){
事件对象.stopPropagation();
}else{
事件对象.cancelBubble = true;
}
*/
var oDivBox = document.querySelectorAll('div')[0];
var oDivMiddle = document.querySelectorAll('div')[1];
var oDivInner = document.querySelectorAll('div')[2];
oDivBox.onclick = function(e){
e = e || window.event;
console.log('我是box-div触发的事件');
// 阻止冒泡事件 / 阻止事件的传播
// 给最外层加载,只是阻止当前标签,触发父级标签的事件
// 不影响,子级标签,触发父级标签事件
// 阻止当前div,触发父级标签的事件
// 但是不影响子级的两个div标签
// e.stopPropagation();
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
oDivMiddle.onclick = function(e){
e = e || window.event;
console.log('我是middle-div触发的事件');
// e.stopPropagation();
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
oDivInner.onclick = function(e){
e = e || window.event;
console.log('我是inner-div触发的事件');
// e.stopPropagation();
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
document.onclick = function(){
console.log('我是document');
}
// 总结
// 外 中 内
// 都写,就都只触发自己
// 外写,就管自己,外,不触发父级
// 中,内,没有变化,中触发自己和外 内触发自己和中外
// 中写,就管自己,外,会触发父级 内触发只到中
// 内写,就管自己,外,会触发父级 中触发,自己和外
</script>
事件委托
<div id="div1">
123
<button>点击</button>
<span class="span1">我是span1</span>
<span class="span2">我是span2</span>
<strong name="abc">我是strong标签</strong>
</div>
<script>
// 事件的委托
// 给当前标签添加事件
// 通过判断触发事件的标签,是子级元素的标签
// 根据不同的标签,执行不同的代码,称为事件的委托
// 给标签添加事件,子级标签触发,不同标签,触发不同程序
var oDiv = document.querySelector('div')
oDiv.onclick = function(e){
// e 事件对象 和 e.target 事件对象目标 都应该有兼容
// console.log(e)
// 通过,判断 e.target 不同的属性值
// 判断,点击的是不同的标签,执行不同的程序
// e.target 中 存储的是 一个标签对象 不是字符串
// e.target == 'div' 是绝对绝对绝对错误的写法
// 使用 e.target 对象的属性来进行判断
// e.target.id 触发事件标签对象的id属性值
// e.target.className 触发事件标签对象的class属性值
// e.target.TagName 触发事件标签对象的标签名称
// 都是大写字母
// e.target.getAttribute('属性') 通过getAttribute,获取属性
// e.target.innerHTML 触发事件标签对象的内容,包括标签
// e.target.innerText 触发事件标签对象的内容,不包括标签
// 只会触发符合条件时执行程序,点击不同的标签,触发不同的事件
// id属性值
if(e.target.id == 'div1'){
console.log('触发事件的标签是div')
}
// 标签名称 必须都是大写字符
if(e.target.tagName == 'BUTTON'){
console.log('触发事件的标签是button')
}
// class属性值
if(e.target.className == 'span1'){
console.log('触发事件的标签是第一个span标签')
}
// class属性值
if(e.target.className == 'span2'){
console.log('触发事件的标签是第二个span标签')
}
// 通过 getAttribute() 获取属性的属性值
if(e.target.getAttribute('name') == 'abc'){
console.log('触发事件的标签是strong标签')
}
}
</script>
事件委托案例
<style>
table{
border-collapse: collapse;
}
table td{
width: 100px;
line-height: 30px;
border: 1px solid #000;
text-align: center;
}
</style>
</head>
<body>
姓名: <input type="text"><br>
年龄: <input type="number" min="18" max="250"><br>
姓名: 男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女">
保密<input type="radio" name="sex" value="保密"> <br>
城市: <select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
</select><br>
<button name="add">添加</button>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>城市</td>
<td>删除</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 事件委托,多用于 动态 添加的标签
// table表格中 所有的tbody 中的内容,都是动态,根据arr数组内容,生成的
// 此时使用事件委托,就特别使用
var arr = [
{name:'张三',age:18,sex:'男',city:'北京'},
{name:'李四',age:19,sex:'女',city:'上海'},
{name:'王五',age:20,sex:'男',city:'广州'},
{name:'赵六',age:21,sex:'女',city:'重庆'},
{name:'刘七',age:22,sex:'保密',city:'天津'},
];
// 获取tbody标签对象
var oTb = document.querySelector('tbody');
// 获取添加button按钮对象
var oBtnAdd = document.querySelector('[name="add"]');
// 调用生成页面函数
setTab();
// 新增数据操作
oBtnAdd.onclick = function(){
// 1,获取数据
var oIptName = document.querySelector('[type="text"]').value;
var oIptAge = document.querySelector('[type="number"]').value;
var oIptCity = document.querySelector('select').value;
var oIptSex = document.querySelectorAll('[type="radio"]');
var oIptSexValue = 0;
oIptSex.forEach(function(item){
if(item.checked === true){
oIptSexValue = item.value;
}
})
// 2,创建对象
var obj = {
name:oIptName,
age:oIptAge,
sex:oIptSexValue,
city:oIptCity,
}
// 3,将对象,写入数据
arr.push(obj);
// 4,根据新的数据,重新渲染生成新的table表格
setTab();
}
// 渲染页面函数
function setTab(){
// 定义空字符串
var str = '';
// 循环遍历数组,生成页面内容字符串
arr.forEach(function(item , key){
// 拼接tr起始标签
str += '<tr>';
// 拼接序号单元格
str += `<td>${key+1}</td>`;
// 循环对象,拼接生成内容单元格
for(var k in item){
str += `<td>${item[k]}</td>`;
}
// 拼接删除单元格
str += `<td><button index="${key}">删除</button></td>`;
// 拼接tr结束标签
str += '</tr>';
})
// 将生成的字符串内容,写入tbody标签
oTb.innerHTML = str;
}
// 给动态生成的标签中,给button按钮,添加事件
// 使用事件委托的形式,给button按钮的父级标签添加事件
// 给一直存在的标签,不是动态生成父级标签,添加事件 ---> tbody
oTb.onclick = function(e){
// 获取事件对象,兼容
e = e || window.event;
// 获取事件对象触发目标,兼容
// eTag就是我们点击的标签
var eTag = e.target || e.srcElement;
// 判断点击的对象是button按钮 -- 标签名称就行,注意必须都大写
if(eTag.tagName == 'BUTTON'){
// 这里的思路和步骤,与 之前 del() 函数中定义的步骤思路完全一致
// 只是之前的标签对象是存储在item中,现在是eTag中
// 获取点击的标签对象中,index属性的属性值
var index = eTag.getAttribute('index');
// 根据属性值,也就是索引下标,执行删除数组单元程序
arr.splice(index , 1);
// 根据新的数组,重新渲染页面,生成新的tbody内容
setTab();
}
}
// 事件委托的优点
// 1,不用循环遍历,执行效率就调高了
// 只是给父级添加事件,判断触发事件的目标
// 2,不同考虑代码的执行顺序
// 只要给一个一直存在的,不是动态生成的父级标签,添加事件
// 判断触发事件的目标 即可 如果有执行,没有不执行
// 不同考虑添加事件的时候,标签是否已经存在
// 一般是选择层级关系最近的,一直存在的标签,添加事件
// 例如我们demo中,使用的是 tbody 如果非要使用table 也是可以的
// 只要判断准确,不冲突即可
// 3,今后我们生成的页面,基本都是动态渲染的,事件委托的方式,会经常使用
</script>
