事件委托
:
1、缘由在做一个项目,点击按钮出现蒙版,但是触发蒙版关闭蒙版,但是给蒙版添加点击事件的话,蒙版上的按钮也会触发点击事件,由此想到了事件委托。
2、Event对象提供了一个属性叫target,可以返回事件的目标节点,我们称为事件源,也就是说,target就可以表示为当前的事件操作的dom,但是不是真正操作dom,当然,这个是有兼容性的,标准浏览器用ev.target,IE浏览器用event.srcElement,此时只是获取了当前节点的位置,并不知道是什么节点名称,这里我们用nodeName来获取具体是什么标签名,这个返回的是一个大写的,我们需要转成小写再做比较(习惯问题):
3、判断等于习惯性的我会用‘===’全等,这样比较严谨。
let btn = document.querySelectorAll( 'button' );
let oDiv = document.querySelectorAll( 'div' );
btn[ 0 ].addEventListener( 'click', () => {
oDiv[ 1 ].style.display = 'block'
} )
oDiv[ 1 ].addEventListener( 'click', ( e ) => {
var ev = e || window.event;
var targat = ev.target || ev.srcElement;
if ( targat.nodeName.toLowerCase() === 'div' ) {
oDiv[ 1 ].style.display = 'none'
}
})
``3