事件监听

addEventListener()方法
参数1为具体的事件
参数2为事件触发后的函数

语法：

元素.addEventListener('click（具体的事件）',function(e) {
	// 事件触发后处理的函数代码
})

解绑事件

传统方式解绑事件

元素.onclick = null;

方法监听解绑事件的方式

元素.removeEventListener('具体的事件',绑定事件时的回调函数名)

解绑事件的代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn1">按钮1</button>
    <button class="btn2">解绑事件</button>
    <script>
        let btn = document.querySelector('.btn1');
        let btn2 = document.querySelector('.btn2');
        var onclickFunc = function(e) {
            console.log(e);

            alert('被点击')
        }
        var aaa = btn.addEventListener('click', onclickFunc);
        btn2.addEventListener('click', function() {
            btn.removeEventListener('click', onclickFunc)
        })
    </script>

</body>

</html>

在这里插入图片描述

事件冒泡

当子盒子和父盒子都添加了点击事件，点击子盒子的时候会触发父盒子的点击事件，这就叫做事件冒泡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .son {
            width: 50px;
            height: 50px;
            background-color: blueviolet;
            margin: 25px auto;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let boxFather = document.querySelector('.father');
        let boxSon = document.querySelector('.son');
        boxFather.onclick = function() {
            console.log('父盒子被点击');

        }
        boxSon.onclick = function() {
            console.log('子盒子被点击');

        }
    </script>

</body>

</html>