DOM事件基础(鼠标)

最新推荐文章于 2022-11-10 23:29:35 发布

FG.

最新推荐文章于 2022-11-10 23:29:35 发布

阅读量628

点赞数 4

分类专栏： Web APIs 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_54418006/article/details/121891216

版权

Web APIs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1. 事件三要素

<body>
    <button id="btn">FG</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 事件是由三部分组成：事件源、事件类型、事件处理程序
        // 1. 事件源 事件被触发的对象
        var btn = document.getElementById('btn');
        // 2. 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        // 3. 事件处理程序 通过一个函数赋值的方式 完成
        btn.onclick = function () {
            alert('点nm');
        }
    </script>
</body>

2. 执行事件的步骤

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

3. 常见的鼠标事件

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

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

在这里插入图片描述

FG.

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM事件基础(鼠标)

1. 事件三要素<body> <button id="btn">FG</button> <script> // 点击一个按钮，弹出对话框 // 事件是由三部分组成：事件源、事件类型、事件处理程序 // 1. 事件源事件被触发的对象 var btn = document.getElementById('btn'); // 2. 事件类型如何触发什么事件比如鼠
复制链接

扫一扫