JavaScript语法基础之事件基础（鼠标、表单、页面事件等）

苏苏渗透大师

于 2024-08-21 23:10:49 发布

阅读量292

点赞数 7

分类专栏： web渗透文章标签： javascript 开发语言安全网络安全 web安全

本文链接：https://blog.csdn.net/m0_74249600/article/details/141404831

版权

web渗透专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1. 事件基础

1.1. 事件是什么？

1.2. 事件调用方式

1.2.1. 在 script 标签中调用

1.4.1. onfocus & onblur

1.5. 页面事件

1.5.1. onload

1. 事件基础

1.1. 事件是什么？

举个例子，当我们点击一个按钮时，会弹出一个对话框。其中点击就是一个事件，弹出对话框就是我们在点击这个事件里面做的一些事情。

在 JavaScript 中，事件一般是用户对页面的一些小动作引起的，例如按下鼠标、移动鼠标等，这些都会触发相应的一个事件。

JavaScript 常见的事件共有以下 5 种：

- 鼠标事件

- 键盘事件

- 表单事件

- 编辑事件

- 页面事件

事件操作是 JavaScript 的核心，可以这样说：不懂事件操作，JavaScript 等于白学。

1.2. 事件调用方式

在 JavaScript 中，调用事件的方式有两种：

- 在 script 标签中调用

- 在元素中调用

1.2.1. 在 script 标签中调用

在 script 标签中调用事件，指的是在<script></script>标签内部调用事件。

语法：

obj.事件名 = function(){
  ……
};

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        //获取元素
        var oBtn = document.getElementById("btn");
        //为元素添加点击事件
        oBtn.onclick = function () {
          alert("Gok");
        };
      };
    </script>
  </head>
  <body>
    <input id="btn" type="button" value="弹出" />
  </body>
</html>

1.2.2. 在元素中调用事件

在元素中调用事件，指的是直接在HTML属性中来调用事件，这个属性又叫做“事件属性”。

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      function alertMes() {
        alert("Gok");
      }
    </script>
  </head>
  <body>
    <input type="button" onclick="alertMes()" value="弹出" />
  </body>
</html>

1.3. 鼠标事件

在 JavaScript 中，常见的鼠标事件如下表所示。

事件	说明
`onclick`	鼠标单击事件
`onmouseover`	鼠标移入事件
`onmouseout`	鼠标移出事件
`onmousedown`	鼠标按下事件
`onmouseup`	鼠标松开事件
`onmousemove`	鼠标移动事件

1.3.1. 鼠标单击

单击事件 onclick 我们在之前已经接触过非常多了，例如点击某个按钮弹出一个提示框。

这里要特别注意一点，单击事件不只是按钮才有，任何元素我们都可以为它添加单击事件！

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = alertMes;
        function alertMes() {
          alert("Gok！");
        }
      };
    </script>
  </head>
  <body>
    <input id="btn" type="button" value="按钮" />
  </body>
</html>

1.4. 表单事件

在 JavaScript 中，常用的表单事件有 3 种：

- onfocus 和 onblur

- onselect

- onchange

实际上除了上面这几个，还有一个 onsubmit 事件。

不过 onsubmit 事件一般都是结合后端技术来使用，所以暂时可以不管。

1.4.1. onfocus & onblur

onfocus 表示获取焦点时触发的事件，而 onblur 表示失去焦点时触发的事件，两者是相反操作。

onfocus 和 onblur 这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时，此时它会获得光标，就会触发 onfocus 事件。当文本框失去光标时，就会触发 onblur 事件。

并不是所有的 HTML 元素都有焦点事件，具有获取焦点和失去焦点特点的元素只有 2 种：

- 表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）

- 超链接

举例：搜索框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #search {
            color: #bbbbbb;
        }
    </style>
    <script>
        window.onload = function () {
            //获取元素对象
            var oSearch = document.getElementById("search");
            //获取焦点
            oSearch.onfocus = function () {
                if (this.value === "百度一下，你就知道") {
                    this.value = "";
                }
            };
            //失去焦点
            oSearch.onblur = function () {
                if (this.value === "") {
                    this.value = "百度一下，你就知道";
                }
            };
        };
    </script>
</head>
<body>
<input id="search" type="text" value="百度一下，你就知道" />
<input type="button" value="搜索" />
</body>
</html>

1.5. 页面事件

1.5.1. onload

在 JavaScript 中，onload 表示文档加载完成后再执行的一个事件。

语法：

window.onload = function(){
  ……
}

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
          alert("JavaScript");
        };
      };
    </script>
  </head>
  <body>
    <input id="btn" type="button" value="提交" />
  </body>
</html>