addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1 {
width: 100px;
height: 100px;
border: 1px solid black;
}
#div2 {
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>用户点击元素div1之后,控制台会打印什么??</p>
<div id="div2">
<div id="div1">div1</div>
</div>
<script>
var div2 = document.getElementById('div2');
var div1 = document.getElementById('div1');
// true是在捕获阶段,false是在冒泡阶段,没写默认为冒泡
// 冒泡是先内后外,捕获是先外后内
div1.addEventListener('click', function(event) {
console.log("1");
}, true);
div2.addEventListener('click', function(event) {
console.log("2");
});
div1.addEventListener('click', function(event) {
console.log("3");
}, false);
div2.addEventListener('click', function(event) {
console.log("4");
}, true);
//4 1 3 2
</script>
</body>
</html>