文章目录

前言

事件：通过代码的方式和页面中的某些内容做好一个约定；
用户触发指定行为的时候，就会执行代码

一、事件绑定

事件绑定的三要素：

  1. 事件源：和谁做好约定
  2. 事件类型：约定一个什么行为
  3. 事件处理函数：当用户触发该行为的时候，执行什么代码。

语法：事件源.on事件类型 = 事件处理函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        div {
   
            width: 200px;
            height: 200px;
            background-color: #b5bce6;
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        //1.获取div元素
        var div = document.querySelector('div')
        //2.绑定点击事件
        div.onclick = function () {
   
            //3.书写点击的时候执行的代码
            console.log('你好呀！')
        }
    </script>
</body>
</html>

点击div后，控制台输出：你好呀！

二、事件类型

1.鼠标事件

click ——鼠标单击
dbclick ——鼠标双击
contextmenu ——右键单击
mousedown ——鼠标按下
mouseup ——鼠标抬起
mousemove ——鼠标移动
mouseover ——鼠标移入
mouseout ——鼠标移出
mouseenter ——鼠标移入
mouseleave ——鼠标移出

2.键盘事件

keydown —— 键盘按下
keyup —— 键盘抬起
keypress —— 键盘键入

3. 浏览器事件

load
scroll
resize

4. 触摸事件

touchstart —— 触摸开始
touchmove —— 触摸移动
touchend —— 触摸结束

5. 表单事件

focus —— 聚焦
blue —— 失焦
change —— 改变
input —— 输入
submit —— 提交
reset —— 重置

三、事件对象

当第一次触发事件时（不一定是点击事件，任何事件都有可能），浏览器会找一个对象数据类型记录下来本次事件的相关信息，比如 什么事件，哪个元素触发的事件，如果是鼠标事件，那么光标的x坐标，y坐标等；如果是键盘事件，那么按下的是键盘上的哪一个按键等一系列信息。当n次触发事件时，浏览器仍会记录这些信息。
如何拿到事件对象呢？在事件处理函数内接收形参就可以了。
代码：

div.onclick = function(e) {
   
    console.log(e)
}

输出：

四、事件对象内的信息

1. 鼠标事件

主要是坐标信息

  1. offsetX 和 offsetY：相对于触发事件的元素
  2. client 和 clientY：相对于浏览器可视窗口
  3. pageX 和 pageY：相对于页面文档流

2. 键盘事件

键盘编码：事件对象.keyCode
键盘中每个按键都有一个固定编码，通过编码来确定按下的是哪一个按键。

五、事件传播

事件传播就是浏览器响应事件的机制：
浏览器窗口最先知道事件的发生
a. 捕获阶段：从window 按照结构子级的顺序传递到目标；
b. 目标阶段：准确触发事件的元素接收到行为；
c. 冒泡阶段：从目标按照结构父级的顺序传递到window ；
本次事件传播结束。

<script>
    //绑定事件
    //1. 获取到需要用到的元素
    var outer = document.querySelector('.outer')
    var center = document.querySelector('.center')
    var inner = document.querySelector('.inner')

    //2.给三个元素都绑定点击事件
    outer.onclick = function () {
   
        console.log('我是 outer 元素， 我被点击了')
    }
    center.onclick = function () {
   
        console.log('我是 center 元素， 我被点击了')
    }
    inner.onclick = function () {
   
        console.log('我是 inner 元素， 我被点击了')
    }

</script>

输出：

六、阻止事件传播

语法：事件对象.stopPropagation()

<script>
    //绑定事件
    //1. 获取到需要用到的元素
    var outer = document.querySelector('.outer')
    var center = document.querySelector('.center')
    var inner = document.querySelector('.inner')

    //2.给三个元素都绑定点击事件
    outer.onclick = function () {
   
        console.log('我是 outer 元素， 我被点击了')
    }
    center.onclick = function () {
   
        console.log('我是 center 元素， 我被点击了')
    }
    inner.onclick = function (e) {
   
        e.stopPropagation()
        console.log('我是 inner 元素， 我被点击了')
    }
</script>

输出：（只触发自己的事件，不会传播到父元素身上，因此只有inner元素被触发事件）

八、事件委托

利用事件冒泡的机制，把自己的事件委托给结构父级中的某一层。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件（三）</title>
    <style>
        ul {
   
            background-color: #b5bce6;
            width: 200px;
            height: 200px;
            margin: 20px auto;
        }
        li{
   
            background-color: #545bb6;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            cursor: pointer;
            margin: 30px 20px 20px 00px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        //1. 获取到ul元素
        var ul = document.querySelector('ul')

        //2.给 ul 绑定点击事件
        ul.onclick = function (e) {
   
            //3. 通过事件目标来判断你点击的是 li
            if(e.target.tagName === 'LI'){
   
                console.log('你点击的是li')
            }
        }
    </script>
</body>
</html>

文章参考视频：b站千锋前端学习营：千锋前端JavaScript全套教程_JS零基础完美入门到项目实战https://www.bilibili.com/video/BV1W54y1J7Ed?share_source=copy_web