1. 鼠标点击事件

包括onclick（单击）、ondblclick（双击）、onmousedown（鼠标按下）和onmouseup（鼠标弹起）事件。

鼠标点击事件有触发事件顺序，例如在单击对象时，会触发onclick事件。在onclick事件触发前，会先发生onmousedown事件，然后发生onmouseup事件。与此类似，在ondblclick事件触发前，会依次触发onmousedown、onmouseup、onclick、onmouseup事件。

2. 鼠标移动事件

包括onmouseover（鼠标经过）、onmousemove（鼠标移动）、onmouseout（鼠标移开）事件。

在鼠标事件处理程序中，一般只使用Event对象的基本属性（如type）和鼠标的状态属性（如button、x、y等）。此外，也可以访问altKey、ctrlKey和shiftKey属性，从而可以识别用户配合使用Alt键、Ctrl键和Shift键的鼠标操作。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e22c61923860beb53f0905040ae94619.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f411de9118fde4280da6050209477fda.image.webp)


```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img/1.gif"  id="mouse" alt="">
    <script>
        mouse.onmouseover = function(){
            document.getElementById("mouse").src ="img/2.gif";
        }

        mouse.onmouseout = function(){
            document.getElementById("mouse").src ="img/1.gif";
        }
    </script>
</body>
</html>
```
处理鼠标事件时，我们经常需要获取鼠标的位置、鼠标按键等信息，具体如表8-7所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/4e64f07a75a0c3113f4b3886c718aa9e.image.webp)

1. 鼠标按键对应的Event对象的button属性
       在鼠标事件处理函数中，使用Event对象的button属性可以识别哪一个鼠标按键被按下。在IE 8以前的版本中，若为1，则是左键被按下；若为2，则是右键被按下；若为4，则是中键被按下。在IE 8以后的版本中，若为0，则是左键被按下；若为2，则是右键被按下；若为1，则是中键被按下。



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a6eab24b8f5fbd2ca874a0651fe7f3fd.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f21da68aa8e41d1d5a7f348dc363157b.image.webp)



8.4 处理鼠标事件

8.3.1 键盘事件


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1292b44b3a7fb8841ebc5012df46b006.image.webp)

- onkeypress——键盘上某个键被按下时触发的事件，一般用于单键操作
- onkeydown——键盘上某个键被按下时触发的事件，一般用于组合键操作
- onkeyup——键盘上某个键被按下后松开触发的事件，一般用于组合键操作

8.3.2  处理键盘事件
处理键盘事件时，经常需要获取键盘按键的键值，实现一些与键盘相关的特效，如键盘的方向键操作。键盘事件的常用属性如表所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ba561729cac563342ebd2ee1d9ad4b7c.image.webp)

键盘上的按键分为字符键（A～Z、a～z、主键盘数字键0～9、小键盘数字键0～9）、功能键（F1～F12）、控制键（Esc、Tab、Caps Lock、Shift、Ctrl、Alt、Enter等）。在键盘事件处理程序中，使用Event对象的keyCode属性可以识别用户按下哪个键，该属性值等于用户按下的键对应的Unicode值。下面分别通过表8-5、表8-6介绍键盘的Unicode值。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/38909a4baacea3f53ac7404a2a3fe91f.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ba140fe2923554bd00c9c9602ee21143.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a49d7a00e6056be1503e24fd2a46a610.image.webp)

触发onkeypress、onkeydown、onkeyup这3个事件，主要遵循如下规则。
- 当按下一次字符键时，依次触发 onkeydown、onkeypress、onkeyup 事件。若按下不放，则持续触发 onkeydown 和 onkeypress 事件。
- 当按下一次非字符键（功能键和控制键）时，依次触发 onkeydown、onkeyup 事件。若按下不放，则持续触发 onkeydown 事件。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/4b22706a08f8c2da0070bca2ea47b6d3.image.webp)

 当按下a键时，按照keydown、keypress、keyup的过程执行，而不是按照代码所写的触发顺序执行，显示结果如图所示
 
同时需要注意的是，keydown和keyup中得到的是A键的Unicode值65，在keypress中得到的是a键的Unicode值


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8ba5984c0ac2ab07fd34762bc70fffcf.image.webp)

当我们按下A键时，同样不管代码中的触发顺序，显示结果如图所示，按照keydown、keypress、keyup的过程执行。

也就是说，keydown和keyup不区分大小写，keypress事件区分大小写，所以在涉及字符操作时，选择keypress事件比较合适。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/41ad5122426cba28fb2cf66bafb28b62.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/51b3887a04113c8253451518fb368282.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img{
            position: absolute;
            left:100px;
            top:100px;
            width: 500px;
            height: 454px;
            border: 1px red  solid;
            background-image: url(img/img3.jpeg);
        }
    </style>
</head>
<body>
    <div id="img"></div>
    <script>
        var img = document.getElementById("img");
        document.onkeypress = function(e){
            if(e.keyCode == 119)  // w

                img.style.top = `${img.offsetTop+10}px`;                
            else if(e.keyCode == 115) //s
                img.style.top = `${img.offsetTop-10}px`;
            else if(e.keyCode == 97) //a
                img.style.left = `${img.offsetLeft+10}px`;
            else if(e.keyCode == 100)  //d
                img.style.left = `${img.offsetLeft-10}px`;
            else
                alert("请重新按键！");
            console.log(img.style.top);
            console.log(img.style.left);

        }
    </script>
</body>
</html>
```

效果图

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/dc2b40e39a346f55c2acd4ace27f46cd.image.webp)

按下a\w\s\d 键时，会向上下左右进行移动 


按下非字符键时，依次触发 onkeydown、onkeyup 这两个事件。

【例8-2】所示为当我们按下Alt键时的触发事件过程。

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.onkeydown = f;
        document.onkeyup = f ;
        document.onkeypress = f;
        function f(e){
            console.log(`${e.type}:Unicode值${e.keyCode}`);
        }
    </script>
</body>
</html>


```
当我们按下非字符键Alt键时，不管代码中的触发顺序是什么，显示的结果如图所示，按照keydown、keyup的过程执行，我们发现在keydown和keyup中得到的Unicode值是18。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a9c8b7b449cb80b42acf40a054d3458a.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0ddf5705836be984552dae0f3f810b77.image.webp)


```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img{
            position: absolute;
            left:0;
            top:0;
            width: 500px;
            height: 454px;
            border: 1px solid red;
            background-image: url(img/img3.jpeg);
        }
    </style>
</head>
<body>
    <div id="img"></div>
    <script>
        var img=document.getElementById("img");
        var j=1;
        document.onkeyup = function(e){
            if(e.keyCode == 38) {// 方向 上  键{
                j = j+0.1;
                img.style.transform = `scale(${j})`;
            } else if(e.keyCode == 40) {// 方向 下  键{
                j = j-0.1;
                img.style.transform = `scale(${j})`;
            }else{
                alert("按钮错误");
            }         
        }
    </script>
</body>
</html>
```

日常的操作中，我们经常需要用组合键来完成一些功能，怎么实现呢？

首先需要确定在什么事件中发生事件驱动程序，比如按下Ctrl+A组合键实现全选操作，这是非字符键和字符键的组合操作，但是字符键和非字符键支持的事件不同。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/030db7a2f09880c37b659eed6f2a8758.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b97ac9fb54c7b56bb2b89a1104615b4d.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/251032f20b268dd77d2e02173830f93a.image.webp)



8.3 处理键盘事件

当事件发生时，有关事件的一些信息，比如发生事件的类型、鼠标和键盘的一些信息，应如何获取呢？这就涉及事件对象的概念。当事件发生时，都会产生一个Event对象，这个对象包含所有与事件有关的信息。接下来将针对Event对象进行详细讲解。


在编写事件处理函数时，有时需要用到Event对象。
- Event对象代表事件的状态，如发生事件的元素名称、键盘按键的状态、鼠标的位置、鼠标按键的状态等。
-  只有当事件发生时，Event对象才有效，并且只能在事件处理程序中访问Event对象。
-  在早期的IE中，通过Window 对象的 event属性可以访问Event对象。在标准浏览器中，都有一个Event对象直接传入事件处理程序中。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/4dec7d20335f3fec1d18832162355046.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/53836e7bdbc5e499b7e2a33696e77b8b.image.webp)

在程序中我们使用“var event = e || window.event”获取不同浏览器中的事件对象，其中“e”是传递的参数，一定要注意事件对象必须在事件处理程序中获取。代码执行后，当在页面中单击鼠标左键时，会弹出含有触发事件的对话框，效果如图所示。

通过 Event 对象，可以访问事件的发生状态，如事件名、键盘按键状态、鼠标位置等信息。其常用的属性/方法如表所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/62d965a32f4345045ad3a7c68991fd78.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/9748624a433fba44920e100469513a2a.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/9156b914d7708d5240157774819a38a7.image.webp)
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">单击鼠标左键，测试触发事件名称
    </p>
    <script>
        var p1 = document.querySelector("#p1");
        console.log(p1);
        p1.addEventListener("mousedown", function(e) {
            var event = e || window.event;
            alert(event.type); //显示事件名
        });
    </script>
</body>
</html>
```

代码执行后，当在页面中单击鼠标左键时，会弹出含有事件名称的对话框



8.2 认识事件对象

# 基本概念
## 事件
事件是指在页面上与用户进行交互时发生的操作，主要包括用户动作和状态变化。

用户动作：用户对页面的鼠标或键盘操作。例如，click、keydown等。

状态变化：页面的状态发生变化。例如，load、resize、change 等。

例如，当用户单击一个超链接或按钮时就会触发单击事件；当浏览器载入一个页面时，会触发载入事件；当用户调整窗口大小的时候，会触发改变窗口大小事件。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/3375d3bbfdaa05b69ade6f84308ea29e.image.webp)

## 事件处理和事件处理程序
事件处理是指对发生的事件进行处理的行为或者操作。例如，当用户单击一个超链接或按钮时就会触发单击事件，浏览器会根据用户动作进行相关的事件处理操作。
事件处理程序是指为响应用户行为或者状态变化所执行的程序。

## 事件驱动
事件驱动是程序的一种执行方式，也就是响应事件的发生而执行相关的事件处理程序的过程。

 例如，当我们单击页面上的超链接触发单击事件时，浏览器会根据用户动作进行相关的事件处理操作，这里的事件驱动就是通过单击事件执行的。

## 事件驱动编程
事件驱动编程是指为需要处理的事件编写相应的事件处理程序

它包括3个步骤，触发事件、启动事件处理程序、处理程序做出反应。  
       
事件驱动编程的一般步骤如下：

确定响应事件的元素
- 为指定元素确定需要响应的事件类型
- 为指定元素的指定事件编写相应的事件处理程序
- 将事件处理程序绑定到指定元素的事件处理程序

在事件驱动执行方式下，程序代码的执行顺序并不是按照代码的顺序从上而下地执行的，而是根据事件触发的需要来执行的。
当触发一个事件，该事件的处理程序就会被启动执行，不管这段程序代码在程序中的什么位置。
 在JavaScript中，由于事件是用户交互产生的，所以其触发的顺序是无法预测的，其执行程序的路径都是不同的。


JavaScript事件大致可以分为以下4类
- 键盘事件
- 鼠标事件
- 页面事件
- 表单事件

用户在使用键盘输入时触发的事件，包括
- keydown——某个键盘按键被按下时触发的事件
- keypress——某个键盘按键被按下并松开时触发的事件
- keyup——某个键盘按键被松开时触发的事件

用户进行单击或移动鼠标操作而产生的事件，主要包括
- click——当用户点击某个对象时触发的事件
- dblclick——当用户双击某个对象时触发的事件
- mousedown——鼠标按钮被按下时触发的事件
- mouseup——鼠标按键被松开时触发的事件
- mouseover——鼠标移到某元素上触发的事件
- mousemove——鼠标被移动时触发的事件
- mouseout——鼠标从某元素移开时触发的事件


因页面状态的变化而产生的事件，主要包括
- load——一张页面或一幅图像完成加载时触发的事件
- unload——用户退出页面时触发的事件
- resize——用户改变窗口大小时触发的事件
- error——加载文档或图像时发生错误时触发的事件

表单相关的事件，是JavaScript中最常用的事件，包括
- submit——表单提交时触发的事件
- reset——表单重置时触发的事件
- change——表单元素内容改变时触发的事件
- select——文本选中时触发的事件
- focus——表单元素获得焦点时触发的事件
- blur——表单元素失去焦点时触发的事件

# 8.1.2 事件处理
事件处理是指为某个元素对象的事件绑定或者移除事件处理程序，使得当事件发生时就会触发该事件的事件处理程序。

 在JavaScript中，事件处理有两种方式，分别为DOM 0级事件处理和DOM 2级事件处理。在介绍这两种事件处理方式之前，首先介绍两个概念：事件属性和事件流。

事件的绑定和移除是通过事件的属性进行的。在JavaScript中，事件属性名称就是“on”+“事件名称”。如click是单击事件名，onclick就是对应的事件属性名，也可以将事件属性名简称为事件名。按照事件属性名的定义，常用的事件属性如表所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/698228dec08da20b00f87f8c2dac248c.image.webp)

## 事件流
在JavaScript中，事件流指的是DOM事件流。当一个事件发生时，不仅产生事件的元素可以响应，其他元素也可以响应。

DOM是一个树型结构，其中的HTML元素上产生一个事件时，该事件会在DOM树中元素节点和根节点之间按照特定的顺序传播，路径所经过的节点都会收到该事件，这个过程就是DOM的事件流。按照传播方向的不同，DOM事件流有两种方式：冒泡事件和捕获事件。

（1）冒泡事件

IE 采用的事件流是事件冒泡。当事件在某一元素上触发时，事件将沿着各个节点的父节点自下而上穿过各个DOM节点，就像冒泡一样，所以这种方式称冒泡事件方式。在冒泡的过程中，任何时候都可以终止事件的冒泡。如果不终止冒泡，事流会沿着DOM节点一直向上直至DOM的根节点。冒泡事件的过程如图所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/931ae35a37558bb5af29d639b4f96bee.image.webp)
（2）捕获事件

Netscapte采用捕获事件，它与冒泡事件相反，在捕获事件中，事件的传播将从DOM树的根节点开始，而不是从触发事件的目标元素开始。事件是从目标元素的所有父元素依次向下传递。在这个过程中事件会从DOM树的根元素到事件目标元素之间各个元素处捕获。捕获事件的过程如图所示。

在W3C定义的事件模型中，事件流可以分为下面3个阶段，具体如图所示。

（1）捕获阶段：事件将沿着DOM树向下传递，经过目标节点的每一个父节点，直到目标节点。例如，若用户单击了一个超链接，则该单击事件将从Document节点转送到<html>元素、<body>元素以及包含该链接的<p>元素。目标节点就是触发事件的DOM节点。例如，如果用户单击一个超链接，那么该超链接就是目标节点。
    
（2）目标阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行该事件监听器。
    
（3）冒泡阶段：事件将沿着DOM树向上传送，再逐次访问目标元素的父节点直到Document节点。该过程中的每一步，浏览器都将检测那些不是捕获事件监听器的事件监听器并执行。
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0d2f6ad5dd138efa719d00010e1b1846.image.webp)



 DOM 0级事件处理是JavaScript指定事件处理程序的传统方式，就是指将一个函数赋值给一个事件处理程序属性，主要分为如下两种形式。
形式一：行内绑定
这种方式通过设置HTML标签的事件属性实现，具体语法格式如下。
```
         <标签名 事件属性="事件处理程序">

```

上述语法格式中，标签名可以是任意的HTML标签名，事件属性是如表8-2所示的事件属性，事件处理程序是事件执行的程序代码，如下。
```
            <input id="btn" type="button" value="单击我" οnclick="alert('thanks');" >
 ```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b914d079362c1f062f111b7a1bed6aeb.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c0154385f95c7b4877e32ed694de6bf2.image.webp)

             
```
             <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天干地支</title>
</head>
<body>
    <p>
        <button name="Abutton1" onclick="alert('甲、乙、丙、丁、戊、己、庚、辛、壬、癸');" >天干</button>
    </p>
    <p>
        <button name="Abutton2" onclick="eb()" >地支</button>
    </p>
    <script>        
        function eb(){
            alert("子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥");
        }
    </script>
</body>
</html>
```
             
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/baaca27739a0e0660f64433ddb224314.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1e796a0d573940929cf03c0418273ed6.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b1251507c336a8645703a0ebc0c69bae.image.webp)
             
```
             <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天干地支-动态绑定</title>
</head>
<body>
    <p>
        <button name="Abutton1" id="button1" >天干</button>
    </p>
    <p>
        <button name="Abutton2" id="button2" >地支</button>
    </p>
    <script>
        document.getElementById("button1").onclick = function(){
            alert('甲、乙、丙、丁、戊、己、庚、辛、壬、癸');
        };

        document.getElementById("button2").onclick = eb;

        function eb(){
            alert("子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥");
        }
    </script>
</body>
</html>
```
## 2级事件处理
为了解决DOM对象的同一个事件不能同时绑定多个事件的问题，在JavaScript中定义了DOM 2级事件处理，实现同一个DOM对象的同一个事件可以绑定多个事件处理程序。
 DOM 2级事件处理使用两个方法来添加和移除事件处理程序，即addEventListener()和removeEventListener()，具体语法格式如下


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b41c22debd634cf3eee28c4b369e6ce7.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5c93ec62107a2c71eb7636e48d2a03c8.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5ec4623e4ca3c58e0192bb477a357376.image.webp)
  
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b583e71088ae4bc1327c81421710885f.image.webp)
             
```
             <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天干地支-动态绑定</title>
</head>
<body>
    <p>
        <button name="Abutton1" id="button1" >天干</button>
    </p>
    <p>
        <button name="Abutton2" id="button2" >地支</button>
    </p>
    <script>
        var btn1 = document.getElementById("button1");
        var btn2 = document.querySelector("#button2");

        btn1.addEventListener("click",function(){
            alert('甲、乙、丙、丁、戊、己、庚、辛、壬、癸');
            btn1.removeEventListener("click",function(){
                alert('甲、乙、丙、丁、戊、己、庚、辛、壬、癸');})
        })

        btn1.addEventListener("click",function(){
            alert("以上是天干");
        })
        btn2.addEventListener("click",hb);
      

        function hb(){
            alert("子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥");
            bnt2.removeEventListener("click",hb);
        }
    </script>
</body>
</html>
```
 通过【任务实践8-3】验证说明
- 对同一个对象可以添加多个事件监听的程序，这些程序会依次执行
- 对同一个对象同时执行添加和移除事件监听的操作时，要采用有名函数的方式


8.1 认识事件

张华最近想参加创新创业大赛，需要在网站中注册，注册完后重新登录。页面中有滑块验证码效果，如图8-1所示。他想学着实现一下，可是发现有关鼠标的操作自己并没有学。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e2b8fa265c66660decccaf50bb7adb0b.image.webp)

根据项目要求，实现滑块验证码效果，分为2步。

（1）滑块和拼图移动

滑块、拼图和鼠标的位置是一致的，滑块的移动过程触发mousedown和mousemove事件，接下来设置它们的移动距离及移动范围。

（2）滑块和拼图停止移动

滑块和拼图停止移动触发mouseup事件。


1. 页面框架
页面整体分拼图和滑块两部分，具体如下。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/758b583d6d532a6c18689d5b6645869a.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑块验证</title>
    <link rel="stylesheet" href="js8.css">
</head>
<body>
    <h1 align="center">模拟滑块验证码效果</h1>
    <div class="drag">
        <div class="image">
            <img src="img/5-1.png" alt="">
        </div>
        <div class="box">
            <i></i>
            <p class="text" unselectable="on" onselectstart="return false;"
            style="-moz-user-select: none;">
                请向右滑动滑块</p>
            <div class="bg"></div>
        </div>
    </div>
    <script src="js8.js"></script>
</body>
</html>
```


2. CSS样式
使用CSS设置拼图和滑块的初始位置。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d7ca68b1ebf1589d3be6d26f0a1fd9d4.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8b6edbb1b9eb9be37064fd8c821ef282.image.webp)
```
*{
    padding:0;
    margin:0;
}
h1{
    margin: 20px;
}
.drag{
    margin: 20px auto;
    width: 400px;
    height: 300px;
}
.drag .image{
    position: relative;
    width: 400px;
    height: 250px;
    background-image: url(img/5-2.png);
}
.image img{
    position: absolute;
    left: 0px;
    top:76px;
}
.drag .box{
    position: relative;
    width: 400px;
    height: 40px;
    line-height: 40px;
    background-color: #ccc;
}
.box i{
    position: absolute;
    width: 26px;
    height: 38px;
    border: 1px solid #666;
    line-height: 40px;
    background: #fff;
    z-index: 5;
    cursor: move;
}
.box .text{
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 2;
}
.box .bg{
    position: absolute;
    height: 100%;
    background: #0d5dfc;
    z-index: 1;
}
```

3. 脚本代码
使用JavaScript分别为mousedown事件和mouseup事件编写事件驱动程序。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/3b483246d561e7fdc8d88a953787ba6f.image.webp)
```
window.onload = function(){
    var img = document.querySelector("img");
    var slider = document.querySelector("i");
    var box = document.querySelector(".box");
    var txt = document.querySelector(".text");
    var bg = document.querySelector(".bg");
    var flag = false;

    slider.onmousedown = function(e){
        var  startX  = e.clientX;
        slider.onmousemove = function(e){
            var moveX = e.clientX - startX;
            console.log(movex);
            console.log(startx);

            this.style.left = img.style.left = bg.style.width = `${moveX}px`;
            if(moveX<=0) moveX<=0;
            if(moveX >= 142){
                flag = true;
                moveX = 142;
                txt.innerHTML = "验证成功！";
                txt.style.color = "#fff";
                slider.onmousemove = null;
                slider.onmousedown = null;
            }
        }
    }
    slider.onmouseup = function(){
        slider.onpointermove = null;
        if(flag) return;
        this.style.left = img.style.left = bg.style.width = 0;
    }
}
```
