DOM ☞ 事件基础

第二章 ：事件基础

---

---

前言

JS使我们有能力创建动态页面，而事件是可以被JS侦测到的行为。
触发—响应机制。

---

一、事件三要素

• 事件源
• 事件类型
• 事件三要素

 <button id="btn"> 夕颜</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1.事件是由三部分组成  事件源 事件类型  事件处理程序  成为事件三要素
        //（1）事件源 事件被触发的对象
        var btn = document.getElementById('btn');
        //（2）事件类型  如何触发 什么事件 比如鼠标点击（onclick） 还是鼠标经过 还是键盘按下 滚动滚轮
        // (3)事件处理程序 通过一个函数赋值的方法完成
        btn.onclick = function () {
            alert('夕颜最帅');
        }
        //事件基础
        //①获取事件源  ②注册事件  ③添加事件处理程序（采取函数赋值形式）
    </script>

二、执行事件的步骤

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

<div> 夕颜 </div>
    <script>
        //一， 获取事件源
        var div = document.querySelector('div')
        //二，注册事件
        //div.onclick
        //三，添加事件事件处理程序
        div.onclick = function() {
            console.log('夕颜最帅');
        }

    </script>

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
oncfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发

---

总结

事件的操作总结完毕