文章目录
  • 一、" 事件 " 开发步骤
  • 1、" 事件 " 开发步骤
  • 2、完整代码示例
  • 二、常见鼠标 " 事件 "
  • 1、常见鼠标 " 事件 "
  • 2、鼠标 " 事件 " 代码示例




Web APIs 博客相关参考文档 :






一、" 事件 " 开发步骤



1、" 事件 " 开发步骤



" 事件 " 开发步骤 :

  • 首先 , 获取事件源 , 通过 querySelector 函数 传入 CSS 选择器 , 可获取事件源 ;
// 1. 获取事件源
        var div = document.querySelector('div');
  • 1.
  • 2.
  • 然后 , 绑定事件 , 上个步骤获取了 div 元素 , div.onclick 就是要绑定的鼠标点击事件 ;
// 2. 绑定事件
        // 要绑定的是事件源 div 的 onclick 点击事件
        // div.onclick 就是要绑定的事件
  • 1.
  • 2.
  • 3.
  • 最后 , 添加事件处理程序 , 下面为 div.onclick 添加了一个匿名函数 , 作为事件处理程序 ,
// 3. 添加事件处理程序
        div.onclick = function() {
            div.innerHTML = "已点击"
            console.log("点击 div 元素");
        }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.



2、完整代码示例



完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>

</head>

<body>
    <div id="hello">未点击</div>

    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本

        // 1. 获取事件源
        var div = document.querySelector('div');

        // 2. 绑定事件
        // 要绑定的是事件源 div 的 onclick 点击事件
        // div.onclick 就是要绑定的事件

        // 3. 添加事件处理程序
        div.onclick = function() {
            div.innerHTML = "已点击"
            console.log("点击 div 元素");
        }
    </script>
</body>

</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.

执行结果 :

【Web APIs】JavaScript 事件基础 ② ( “ 事件 “ 开发步骤 | 常见鼠标 “ 事件 “ )_javascript

【Web APIs】JavaScript 事件基础 ② ( “ 事件 “ 开发步骤 | 常见鼠标 “ 事件 “ )_Web APIs_02






二、常见鼠标 " 事件 "



1、常见鼠标 " 事件 "



常见鼠标 " 事件 " :

  • 鼠标点击 : onclick ;
  • 鼠标经过 : onmouseover ;
  • 鼠标离开 : onmouseout ;
  • 获得焦点 : onfocus ;
  • 失去焦点 : onblur ;
  • 鼠标移动 : onmousemove ;
  • 鼠标按下 : onmousedown ;
  • 鼠标抬起 : onmouseup ;


2、鼠标 " 事件 " 代码示例



代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>

</head>

<body>
    <div id="hello">未点击</div>

    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本

        // 1. 获取事件源
        var div = document.querySelector('div');

        // 2. 绑定事件
        // 要绑定的是事件源 div 的 onclick 点击事件
        // div.onclick 就是要绑定的事件

        // 3. 添加事件处理程序
        div.onclick = function() {
            div.innerHTML = "已点击"
            console.log("点击 div 元素");
        }

        div.onmouseover = function() {
            console.log("鼠标经过");
        }

        div.onmouseout = function() {
            console.log("鼠标离开");
        }

        div.onmousemove = function() {
            console.log("鼠标移动");
        }

        div.onmousedown = function() {
            console.log("鼠标按下");
        }

        div.onmouseup = function() {
            console.log("鼠标抬起");
        }
    </script>
</body>

</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.

执行结果 :

【Web APIs】JavaScript 事件基础 ② ( “ 事件 “ 开发步骤 | 常见鼠标 “ 事件 “ )_javascript_03

【Web APIs】JavaScript 事件基础 ② ( “ 事件 “ 开发步骤 | 常见鼠标 “ 事件 “ )_Web APIs_04