<!-- div标签中有两个子级标签,需要给两个子级标签,添加不同的点击事件 -->
<div>
<span id="span1">我是第一个</span>
<span id="span2">我是第二个</span>
</div>
<script>
// 事件的委托
// 事件委托,大部分是对于动态生成的标签对象使用的
// 例如 table表格 凡是通过数据生成的标签对象,都是动态生成的标签对象
// 如果需要添加事件最好写成事件委托形式
// 1,父级标签对象是一直存在的标签对象,不会因为执行顺序获取不到
// 2,只是给父级标签对象添加事件,不需要通过循环遍历,给所有的标签添加事件
// 执行效率就高
// 3,操作灵活,可以通过各种方式区分触发事件的标签对象,不用一个一个获取标签对象了
// 事件不是写给当前标签的,事件绑定给父级标签
// 通过父级标签触发事件,然后通过判断触发事件的对象,来判断需要执行的不同代码
// 应该绑定给当前标签的事件,绑定给父级标签,通过判断触发事件的对象,来执行程序
// 绑定给父级标签对象的事件,触发时,有可能是不同的标签对象,触发的事件
// 可以通过 事件对象 e 中,JavaScript自动存储的数据信息中,看到不同的触发事件的对象
// 事件的委托 事件的传播 是有本质的区别的
// 事件的委托为什么能执行:
// 子级标签没有绑定事件,因为是父级标签的一部分,点击子级也算是点击父级,因为也会触发父级的事件
// 事件的传播为什么能执行:
// 子级标签,父级标签,都要写事件,并且事件类型相同,点击子级,触发事件,并且触发父级相同事件
// 总结 :
// 事件的传播: 子级父级都要绑定事件 事件类型必须相同 点击子级,触发子级事件,同时触发父级相同类型事件
// 触发对象是相同的标签对象
// 事件的委托: 只有父级需要绑定事件 点击子级,子级也算是父级的一部分,会触发父级绑定的事件,只是触发对象不同
// 触发对象是不同的标签对象
// 方法1:
// 可以直接给两个标签绑定事件
// var oSpan1 = document.querySelector('#span1');
// var oSpan2 = document.querySelector('#span2');
// oSpan1.addEventListener('click' , function(){
// console.log('我是span1');
// });
// oSpan2.addEventListener('click' , function(){
// console.log('我是span2');
// });
// 事件委托
var oDiv = document.querySelector('div');
oDiv.addEventListener('click' , function(e){
e = e || window.event;
console.log(e);
})
</script>
// 通过事件委托,实现点击不同标签对象,执行不同程序
// e.target 中 存储的是 触发事件的标签对象,相关信息
// 可以通过 e.target 中 存储的 触发事件的标签对象的相关信息,区分标签对象
// id,className,属性属性值
// 有些属性可以直接使用 或者 可以使用通用方法 标签.getAttribute() 获取属性的数据
// e.target.nodeName e.target.tagName 是触发事件的标签对象的名称,都是大写英文字母
// 获取父级标签对象
var oDiv = document.querySelector('div');
// 给父级标签对象绑定事件
oDiv.addEventListener('click' , function(e){
// 1,兼容事件对象e
e = e || window.event;
// 2,e.target中 存储点击对象的信息
console.dir(e.target);
if(e.target.id === 'span1' ){
console.log('我是点击span1触发的');
}else if (e.target.id === 'span2'){
console.log('我是点击span2触发的');
}
} )