前端学习笔记-JS-DOM-事件基础

最新推荐文章于 2024-09-07 14:03:53 发布

原创最新推荐文章于 2024-09-07 14:03:53 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

前端学习-JavaScript DOM BOM 专栏收录该内容

15 篇文章

订阅专栏

本文深入讲解JavaScript中的事件处理机制，包括事件的组成、常见事件类型及其触发条件，如鼠标点击、鼠标经过等，并通过示例代码展示如何为按钮元素绑定事件处理函数。

事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些触发JavaScript的事件。

事件由三部分组成：

事件源事件被触发的对象比如按钮
事件类型如何触发比如鼠标点击、鼠标经过、键盘按下、滚动滚轮
事件处理程序通过函数赋值的方式完成

<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        alert('触发事件');
    }
</script>

事件都有：

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