给元素添加事件监听器

addEventListener介绍

addEventListener() 方法用于向指定元素添加事件处理程序（事件句柄handler）。

参数1：事件名称必须。字符串，指定事件名。
注意: 不要使用 “on” 前缀。 例如，使用 click ,而不是使用 onclick。

参数2：function 必须。指定要事件触发时执行的函数。
注意：事件对象会作为第一个参数传入函数。

参数3：useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

true - 事件处理程序（事件句柄）在捕获阶段执行
false默认

addEventListener给元素绑定事件

var box = document.querySelector('.box'); 
//给元素添加一个事件监听器 （绑定事件处理程序）  
box.addEventListener('click',function(){
     console.log(666);
});
console.log(999);

事件流

事件流有三个阶段：

        1.捕获阶段
        2.目标阶段
        3.冒泡阶段。

事件对象

        行内式：

<div id="box" onclick="doClick()"></div>
<script>function doClick() {console.log(window.event);}
</script>

                注意：window的事件可以省略window

        addEventListener绑定事件获取事件对象

// 给一个按钮添加点击事件处理程序
const myButton = document.querySelector("#my-button");myButton.addEventListener("click", function (event) {console.log(event.type); // 获取事件类型（click）console.log(event.target); // 获取目标元素（myButton）
});