简单的鼠标和键盘事件+阻止默认阻止冒泡+dom0，dom2

什么是事件

在我们学习DOM之后，事件就是我们必不可少的一块知识点了，事件其实就是我们的一些操作需要在用户来完成之后才执行的。比如我们PC端的点击事件，键盘事件，以及我们移动端的的触屏事件。接下来咱们先来总结一下这些事件的类型和方法。

1.UI事件（这个不一定与用户的操作有关）

（1）onload 当页面完全加载之后再window上触发
（2）onresize 当窗口大小变化时在window上触发
（3）onscroll 当用户滚动带有滚动条的元素中的内容时，在该元素上触发

2.鼠标事件

（1）onclick（单击）
（2）ondblclick（双击）
（3）oncontxetmenu（右击菜单）
（4）onmouseenter（移入）
（5）onmouseleave（离开）
（6）onmousedown（按下）
（7）onmouseup（抬起）
（8）onmousemove（移动）
除了上面的事件类型，还有坐标位置来提供给我们使用

screenX，screenY 这两个是我们在屏幕中的x，y坐标，可以使用这个方法来获取到我们当前点击的位置具体屏幕边缘的坐标。
clientX,clientY 表示事件发生时鼠标指针在视口中的水平和垂直坐标。也是我们经常用到的。
写一个案例来看一看，一直说这些概念确实也枯燥

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            overflow: hidden;
        }
        
        .drag {
            width: 300px;
            height: 300px;
            background-image: url(https://tse1-mm.cn.bing.net/th/id/R-C.2ff981b282855b4369d8a205908342ee?rik=DhuHNi9MSJcFEg&riu=http%3a%2f%2fp0.qhimg.com%2ft017c136841bc4dbce5.jpg&ehk=sYDKBGEMtolxHwkbRFzlVW1VHnhBLH7l1%2fJtCTSs0sI%3d&risl=&pid=ImgRaw&r=0);
            background-size: cover;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="drag"></div>
</body>
<script>
    var div = document.querySelector('div')
        //点击后得到我们点击的位置
    div.onmousedown = function(e) { //这里的这个e是一个形参，表示我们的图片
        var x1 = e.clientX

        var y1 = e.clientY // 得到点击的xy坐标


        //之后我们要得到点击位置的偏移量
        var l1 = this.offsetLeft
        var h1 = this.offsetTop

        window.onmousemove = function(e) {//这个指针在window内移动来完成的，需要给window添加鼠标移动事件
            var x2 = e.clientX
            var y2 = e.clientY
                // console.log(x2, y2);
            var l2 = l1 + (x2 - x1)
            var h2 = h1 + (y2 - y1)

            div.style.left = l2 + 'px'
            div.style.top = h2 + 'px'
        }
    }
    div.onmouseup = function() {
        window.onmousemove = ''
    }
</script>

这个是一张图片拖拽的案例，有一个边界处理没有写，在之后的案例中会补充到。当然这也是我们鼠标事件的一些简单应用

2.键盘事件

(1)onkeydown 当用户按下键盘上的任意键出发，按住不动重复触发
(2)onkeyup 当用户释放键盘上的键时触发
(3)onkeypress 当用户按下键盘上的字符键时触发

我们在判断用户按下的是那个键后者我们来设置按那个键的时候，我们可以通过设置键码event.keyCode来确定。

我们也来通过一个案例来练习一下，上面的是鼠标拖动滑块，我们这次使用WASD来控制滑块的移动
在写之前，先来说一下思路，在刚开始接触到的时候我们可能第一时间想到的是只需要添加键盘事件即可，但是这样的操作会让我们的移动显得特别的不自然，尤其是当我们希望滑块向左上右上滑动的时候。这个时候我们就需要换一个思路来解决这个问题使用定时器+布尔值判断的方法来控制键盘的移动。
当按下一个键的时候添加onkeydown事件，同时将布尔值改为ture。在释放一个键的时候添加onkeyup事件，将布尔值改为false。之后我们只需要在定时器里面完成判断即可
在这里需要注意的是我们在添加键盘事件的时候，不是给我们的事件本事添加键盘事件，而是给我们的窗口window添加键盘事件。

下面是代码部分

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘控制div移动</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #ok {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>

<body>
    <div id="ok"></div>
</body>
<script>
    var dOk = document.querySelector('#ok')
        // 在使用键盘控制移动的时候，我们采用定时器+布尔值的方法
    var isLeft = false
    var isTop = false
    var isRight = false
    var isBottom = false
    var timer = null
    window.onkeydown = function(e) {
        if (e.keyCode === 37) {
            isLeft = true
        }
        if (e.keyCode === 38) {
            isTop = true
        }
        if (e.keyCode === 39) {
            isRight = true
        }
        if (e.keyCode === 40) {
            isBottom = true
        }



    }
    window.onkeyup = function(e) {
        if (e.keyCode === 37) {
            isLeft = false
        }
        if (e.keyCode === 38) {
            isTop = false
        }
        if (e.keyCode === 39) {
            isRight = false
        }
        if (e.keyCode === 40) {
            isBottom = false
        }
    }
    timer = setInterval(function() {
        var l = dOk.offsetLeft
        var t = dOk.offsetTop
        if (isLeft) {
            l -= 5
        } else if (isTop) {
            t -= 5
        } else if (isRight) {
            l += 5
        } else if (isBottom) {
            t += 5
        }
        dOk.style.left = l + 'px'
        dOk.style.top = t + 'px'
    }, 30)
</script>

上面是鼠标和键盘事件的一些知识点，后面的表单事件，移动端中的触屏事件，之后也会介绍。接下来在学习一些概念。

1.阻止默认

阻止默认就是阻止用户的一些可以进行的浏览器默认行为。比如右击弹出菜单，选中复制等等
preventDefault() 阻止默认

2.阻止冒泡

这里的冒泡不是我们所说的排序哈。而是事件冒泡（类似浮起来的气泡），我们的浏览器在执行代码的时候事件由父级传向子级，称之为事件冒泡，当我们想给某一事件添加特定的，不会传递的一些值的时候，可以使用阻止冒泡来做。
stoppropagation() 阻止冒泡

3.dom 0级事件和dom 2级事件

这个主要的区别在于dom0级事件只能在注册一次，后面的会覆盖掉旧的，比如我们给事件e添加onclick事件，如果我们再次给e添加点击事件，那么就会覆盖掉我们之前添加的事件。
dom2级事件给我们提供了能够让我们重复注册事件的方法
添加事件：addEventListener(event,function(){},userCapture)
卸载事件：removeEventListener(event,function(){},userCapture)
我们看下这三个参数分别代表的意思
event：「事件名称」
function：「事件的处理程序」(事件触发时执行的function)
userCapture:「Boolean」值，由这个Boolean决定事件是以「捕获」还是「冒泡」机制执行，若不指定则预设为「冒泡」。

捕获（true）：从启动事件的元素节点开始，逐层往下传递（类似向下捕获东西）
冒泡（false）：逐层向上依序被触发（类似浮起来的气泡）

DOM事件流

这个大家也是我们的DOM事件流
当一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段：

捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
目标阶段：真正的目标节点正在处理事件的阶段；
冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。

原文链接：https://blog.csdn.net/m0_46335802/article/details/124931486