js事件基础：事件概述，事件的组成，执行事件的步骤，常见的鼠标事件

最新推荐文章于 2022-10-14 08:40:12 发布

奶盖不加糖

最新推荐文章于 2022-10-14 08:40:12 发布

阅读量762

点赞数 1

文章标签： javascript html5 html css3

本文链接：https://blog.csdn.net/qq_44156869/article/details/108962265

版权

WebAPIs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

- 事件基础

事件基础

事件概述

JavaScript使我们有能力创建动态页面，而事件基础是可以被JavaScript侦测到的行为。

简单理解：触发—响应机制。

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

事件的组成：

事件源：获取对象，谁被触发了
事件类型：用什么来触发
事件处理程序：做了什么事，一般通过一个匿名函数赋值的方法来完成。

例子：

<body>
    <button id="btn">唐伯虎</button>
    <script>
        //点击一个按钮，弹出对话框
          //1.事件是有三部分组成    事件源   事件类型  事件处理程序  我们称为事件三要素    
        //（1）事件源       事件被触发的对象    谁     按钮
        var btn = document.getElementById('btn');
        //(2)事件类型      如何触发  什么事件  比如一个鼠标点击（onclick） 还是鼠标经过  还是键盘按下
        //(3) 事件处理程序    通过一个函数赋值方式  完成
        btn.onclick = function () {
            alert('点秋香');
        }

    </script>
</body>

执行事件的步骤

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

例子：

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

常见的鼠标事件

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