事件基础

事件三要素：事件源 事件类型 事件处理程序。

<body>
    <button id = 'btn'>大河之剑</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1.事件有三部分组成  事件源  事件类型 事件处理程序  我们也称为事件三要素
        // (1) 事件源  事件被触发的对象  谁？ 按钮
        var inc = document.getElementsByTagName('div')
        // (2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        // (3) 事件处理程序 通过一个函数赋值的方法 完成
        inc.onclick = function() {
            alert('天上来');
        }
    </script>
</body>

执行事件的步骤：

  1. 获取事件源
  2. 注册事件（绑定事件）
  3. 添加事件处理程序（采取函数赋值形式）
<body>
    <div>绳绳兮不可为,复归于无物</div>
    <script>
        //执行事件步骤
        // 1.点击div 控制台输出 我被选中了
       var bln = document.querySelector('div');
        // 2.绑定事件 注册事件
        // bln.ocnlick 
        // 3.添加事件处理程序
       bln.onclick = function() {
           console.log('我被选中了');
       }
    </script>
</body>

常见的鼠标事件

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