事件基础

javascript使我们有能力创建动态页面，而事件是可以被javascript侦测到的行为
简单理解：触发--响应机制

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

事件由三部分组成：事件源、事件类型、事件处理程序(事件三要素)
事件源：事件被触发的对象--谁被触发了
事件类型：事件类型--如何触发，什么事件。如鼠标点击(onclick)还是经过，还是键盘按下
事件处理程序：事件处理程序：通过函数赋值的方式完成

    <button id="btn">唐伯虎</button>
    <script>
        //点击按钮弹出对话框
        //1.事件时有三部分注册

        //1.事件源--谁被触发了
        var btn = document.getElementById('btn');
        //2.事件类型--如何触发，什么事件。如鼠标点击(onclick)还是经过，还是键盘按下
        //3.事件处理程序：通过函数赋值的方式完成
        btn.onclick = function() { //按钮(btn)被点击(onclick)
            alert('点秋香');
        }
    </script>

image.png

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

    <div>123</div>
    <script>
        //执行事件步骤：
        //点击div  控制台输出 我被选中了
        //1.获取事件源
        var div = document.querySelector('div');
        //2.绑定事件(注册事件) div.onclick
        //3.添加事件处理程序
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>

image.png

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