Javascript中的事件源
疑问一：什么是事件源？
解答：发生事件的对象，一般指某一具体的组件，比如点击的按钮，超链接等等
疑问二：使用事件源有什么好处？为什么要使用事件源？
解答：可以大量的节省性能，提升网页运行速度。例如，在一个div容器中有多个p标签，我们需要点击里面的p标签进行函数事件处理，如添加一个类名active，单击让它变为蓝色。我们之间常用的方法为let一个变量，使用querySelectorAll("p")进行获取所有的p标签，然后利用for循环对其所有的p标签绑定一个单击响应函数，但是这样大量的获取与大量的绑定，会影响一定的性能，因此我们拓展了事件源，可以使用事件源绑定给它们的父级，然后在父级找点击发生的源头，对其进行响应的函数。效果及其代码如下:
点击前：
点击后：
我们之前的常用的方法为里面每一个p标签元素绑定一个单击响应函数，如下：
html和css的代码
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 560px;
height: 330px;
background-color: pink;
margin: 30px auto;
}
p{
width: 60px;
height: 30px;
background-color: red;
margin: 10px;
display: inline-block;
}
p.active{
background-color: blue;
}
</style>
<body>
<div class="box"></div>
</body>
js代码如下：
<script type="text/javascript">
let box = document.querySelector(".box")
let len = ((box.offsetWidth/80)|0)*((box.offsetHeight/50)|0)
let meet = document.createDocumentFragment()
for(let i = 0;i<len;i++){
let p = document.createElement("p")
meet.appendChild(p)
}
box.appendChild(meet)
//上面部分代码不懂的可以参考上一个帖子
let pAll = document.querySelectorAll("p")
for(let s of pAll){
s.addEventListener('click',function(){
s.classList.add("active")
})
}
</script>
由此可见，以往的方法需要大量的绑定dom元素，这样比对性能并不是很友好，因此这时我们可以使用事件源。代码如下：
<script type="text/javascript">
let box = document.querySelector(".box")
let len = ((box.offsetWidth/80)|0)*((box.offsetHeight/50)|0)
let meet = document.createDocumentFragment()
for(let i = 0;i<len;i++){
let p = document.createElement("p")
meet.appendChild(p)
}
box.appendChild(meet)
box.addEventListener('click',fun)
function fun(even){
even.target.classList.add("active") //target获取点击的事件源，对其进项绑定单击响应函数
}
</script>
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
