什么是事件委托?为什么要用事件委托?
事件委托机制又叫事件代理.我们给dom绑定一个事件往往很简单
element.addEventListener('eventType',function(){
//事件发生后的js操作
})
可是如果给一个不存在的dom元素绑定事件呢?例如有一个ul,下面有很多li,这些li是通过服务器动态获取的,具体有多少个是不确定的,那如何动态的给这些li绑定事件呢?
addEventListener()的应用
当我们给一个事件添加点击事件的时候自然用到的addEventListener()有三个参数
第一个是字符串,表示触发事件,比如'click'.
第二个是处理函数
第三个是个布尔值,默认为false,代表事件冒泡,true代表事件捕获.说一下自己的理解,举个例子,如果有个妹子和我牵手,那么我可以说她触碰到我的手了,也可说触碰到我的肢体了,也可以说触碰到我的身体了.这是个逐级放大的过程.那dom中也是如此,当你触发一个节点的事件,那么其实从某种角度来说你也触发了该节点的父节点的事件.逐级向父节点触发事件的过程就像冒泡泡一样一点一点上升扩大,就是事件冒泡.反向冒泡就是事件捕获.
e.target
那回到我们这个问题,如果想给暂时不存在的dom节点添加事件该怎么办呢?好在addEventListener()有一个参数,就是event(通常简写做e),e对象有一个属性就是e.target,代表被触发的元素(包括该元素及其子元素),然后
e.target.getElementsByTagName('li')
通过这行代码就会获得所有标签为li的子元素,下面的代码可以在控制台输出被点击的节点
<body>
<div id="div1">i'm div1
<li>i am li 1</li>
<li>i am li 2</li>
</div>
<script>
window.onload = function () {
let div = document.getElementById('div1')
div.addEventListener('click', function (e) {
if(e.target.nodeName === 'LI'){
console.log(e.target)
}
})
let li = document.createElement('li')
li.innerHTML = 'i am li 3'
div.appendChild(li)
}
</script>
</body>
网友评论