DOM事件基础

最新推荐文章于 2025-11-28 09:44:01 发布

原创最新推荐文章于 2025-11-28 09:44:01 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

本文深入探讨了JavaScript中的事件处理，包括事件源、事件类型和事件处理程序的概念。通过示例展示了如何使用JavaScript监听和响应用户操作，如点击、鼠标移动等常见鼠标事件。了解这些基础知识对于前端开发至关重要，能帮助开发者创建交互式的网页应用。

事件：触发响应的机制。

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

事件源：事件被触发的对象，如按钮。

事件类型：如何触发、什么事件，如点击、经过、按下。

事件处理程序：通过一个函数复制的方式完成。

<body>
    <button id="btn">按钮</button>
    <script>
        //执行事件步骤
        //1.获取事件源
        var btn = document.getElementById('btn')
        //2.绑定事件 注册事件
        //3.添加事件处理程序
        btn.onclick = function () {
            alert('你点击了这个按钮');
        }
    </script>
</body>

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