addEventListener() 第三个参数作用
分类：实例代码
关于addEventListener()方法的基本用可以参阅JavaScript addEventListener()一章节。
上述文章已经对方法的第三个参数做了详细介绍，下面文章完全可以不看。
语法结构：
addEventListener(event,function,capture/bubble);
由此可见，第三个参数是用来规定是采用捕获类型还是冒泡类型。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#outDiv{
width:300px;
height:200px;
background:#3A1718;
font-size:12px;
}
#middleDiv{
width:200px;
height:100px;
background:blue;
margin:0px auto;
}
#inDiv{
width:100px;
height:50px;
background:green;
margin:0px auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
outDiv.addEventListener("click",function(){info.innerHTML += "outDiv" + "<br>"; },false);
middleDiv.addEventListener("click",function(){info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function (){info.innerHTML += "inDiv" + "<br>"; }, false);
}
</script>
</head>
<body>
<div id="outDiv">
<div id="middleDiv">
<div id="inDiv">请在此点击鼠标</div>
</div>
</div>
<div id="info"></div>
</body>
</html>
如果参数为false，那么就采用冒泡型事件，那么事件就会从内部往外层触发。
如果参数为true，那么就采用捕获型事件，那么事件就会充外层向内触发。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu