DOM事件基础

事件基础

事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被监测到的行为

简单理解：触发——响应机制

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件三要素

事件是由三部分组成：事件源、事件类型、事件处理程序。称为事件三要素

<button id="btn">点击触发事件</button>

1. 事件源：事件触发的对象，上述中的按钮就是事件源

let btn=document.querySelector('#btn');

2. 事件类型：如何触发，什么事件，比如鼠标点击事件(onclick)，还是鼠标经过，还是键盘按下
3. 事件处理程序：通过一个函数赋值的方式完成

        btn.onclick=function(){
            alert('你触发了点击事件')
        }

执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采用函数赋值的形式）

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开时触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发