什么是事件
事件（event），定义为：比较重大,对一定的人群会产生一定影响的事情。对于前端开发来说，事件就是在浏览器中触发动作的能力，比如在点击某个元素时启动JS。
事件绑定
<button id='haha'>点我</button>
<script>
var button = document.getElementById('haha')
button.onclick=function(){
console.log("绑定成功")
}
</script>```
以上代码对button元素通过JS绑定了一个点击事件，当点击按钮后，浏览器控制台就会显示guagua，这种方法叫做事件绑定，但是如果要对该事件添加多个事件处理函数，此方法不适用，因为事件绑定只能添加一个，如果添加多个，后面的会覆盖前面的。
##事件监听
<button id='haha'>点我</button>
<script>
var button = document.getElementById('haha')
button.addEventListener('click',function(){
console.log("监听成功")
})
</script>```
以上代码是通过addEventListener()监听了一个点击事件，addEventListener()解决了事件覆盖的情况，addEventListener()接受三个参数分别是事件类型，函数，布尔值，如果布尔值是true那么就是捕获，如果是false则是冒泡。因此可见addEventListener还可以控制事件的触发方式。
事件委托
为什么要用事件委托
1、如果对每个元素都监听，就会产生很多监听器，监听器是占内存的。
2、打个比方，如果有1000个Li，那岂不是要写1000个监听器？当然不能这样搞，所以就需要用到时间委托了。
例子1
代码
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul id="haha">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<script>
var a = document.getElementById('haha')
haha.addEventListener('click',function (e){
if(e.target.tagName === 'LI'){
console.log('ok！')
}
})
//注意tagName是大写
</script>
</body>
</html>
以上代码就是最简单的事件委托方法，通过监听父元素，再通过条件语句判断点击的元素是什么，那么问题就来了，如果在一个Li里面加上一个span呢？答案是点击的时候事件委托会失效，这时候只需要略微修改一下条件语句即可
代码
var a = document.getElementById('haha')
haha.addEventListener('click',function (e){
if(e.target.tagName === 'LI'||
e.target.parentNode.tagName === 'LI'){
console.log('ok！')
}
})
//注意tagName是大写
这样会在点击的元素往上查找，复合条件语句判断的时候就触发事件。
例子2
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<style>
p{
background-color: gray;
}
h1{
background-color: blue;
}
span{
background-color: red;
}
</style>
<div>
<p>我是<span>p</span></p>
<h1>我是<span>h1</span></h1>
</div>
<script>
var div = document.querySelector('div')
div.addEventListener('click',function(e){
var t = e.target
while(t.tagName !== 'H1'){
if(t === div){
t = null//这句代码思考了好久，可以针对这个例子简单的说，如果点击的是p就会继续往上找，如
果找到了 div那就证明找完了，不需要往上再找了，所以把t等于null。
break;
}
t = t.parentNode
}
if(t !== null){
console.log('H1！')
}else{
console.log('error')
}
})
</script>
</body>
</html>
代码
以上代码的需求为点击h1或h1的子元素时返回h1！，如果点击其他元素的时候返回error。
在以上代码中我们首先监听div，然后通过while循环内的条件语句来判断点击的是不是h1元素，如是就返回返回h1！，如果不是的话就继续往上找父元素，直到找到div为止。
网友评论