凯的个人博客

js事件

4/29/2024 js
  • 事件
    • 事件监听方式
    • 事件三要素与 四要素event
    • 事件取消监听

# 1.事件

页面 响应 用户的操作 用户行为

# 事件监听方式

<div onclick="js代码 可以是函数"> 点我啊</div>
1
<div onclick="js代码 可以是函数"> 点我啊</div>
<script>
 divDOm.addEventLisner('事件类型',执行函数)
</script>
1
2
3
4
<a href="连接"> 点我啊</div>
1
  • 事件对象 event

浏览器在事件中 自带的全局变量 只要是事件 都会有个默认的实参 event

当前事件触发一瞬间 浏览器可以拿到 所有跟事件相关的数据

 <div onclick="btn(event)">点我啊</div>

    <script>
        function btn(e){
            console.log(e);
            alert('点你了')
        }
    </script>
1
2
3
4
5
6
7
8
    let divDOm = document.querySelector('div');
        divDOm.addEventListener('click',function(event){
            console.log(event);  //事件对象
            console.log('点你了');
        })
1
2
3
4
5

# 2.事件三要素

事件源：哪个Dom在触发事件

事件的类型：

事件执行函数：

<div onclick="btn(event)">点我啊</div>

    <script>
        function btn(e){
            console.log(e);
            alert('点你了')
        }
    </script>


    let divDOm = document.querySelector('div');
        divDOm.addEventListener('click',function(event){
            console.log(event);  //事件对象
            console.log('点你了');
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 3.事件四要素(可选)

事件对象---event

浏览器在事件中 自带的全局变量 只要是事件 都会有个默认的实参 event

# 4.事件冒泡

当前盒子 触发以后 会依次向上触发 ，直到 html最顶层触发完

# 5.阻止事件冒泡

  event.stopPropagation()
1
   let box = document.querySelector('.box')
        let box1 = document.querySelector('.box1')
        let box2 = document.querySelector('.box2')
        box.addEventListener('click',function(event){
            console.log('点击了 box');
            location.href="https://baidu.com"

        })
        box1.addEventListener('click',function(event){
            console.log('点击了 box1');
            location.href="https://bilibili.com"
            event.stopPropagation()
        })
        box2.addEventListener('click',function(event){
            console.log('点击了 box2');
            location.href = 'https://www.gotang.cn'
            event.stopPropagation()
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 6.浏览器的默认行为

浏览器的标签 自带的 事件效果

a href 跳转

event.preventDefault()
1
	<a href="https://www.baidu.com">
        <div class="box1">
            <div class="box2"></div>
        </div>
    </a>
    <script>
        let box = document.querySelector('.box')
        let box1 = document.querySelector('.box1')
        let box2 = document.querySelector('.box2')
        // box.addEventListener('click',function(event){
        //     console.log('点击了 box');
        //     location.href="https://baidu.com"

        //     event.stopPropagation()
        // })
        box1.addEventListener('click',function(event){
            console.log('点击了 box1');
            location.href="https://bilibili.com"
            // 阻止浏览器的默认行为 --点击box1 不会触发 a标签的跳转
            event.preventDefault()
        })
        box2.addEventListener('click',function(event){
            console.log('点击了 box2');
            location.href = 'https://www.gotang.cn'
            event.stopPropagation()
        })
    </script>
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

# 2.event 事件对象

根据不同的事件类型 会返回 不同的 event 属性值

  • 点击时
clientX: 109  #点击位置 距离浏览器窗口最左边的距离
clientY: 112  #点击位置 距离浏览器创建 最上边的 距离
offsetX: 7    #点击位置 距离自身盒子的最左边的距离
offsetY: 8    #点击位置 距离自身盒子的最上边的距离

pageX: 107
pageY: 108  

screenX: 107
screenY: 229

let x = event.clientX || event.pageX;  //点击位置 和浏览器窗口最左边的距离
1
2
3
4
5
6
7
8
9
10
11
12
  • 案例
   <!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>
<style>
    box{
        position: relative;
        width: 630px;
        height: 140px;
    }
    .box1{
        position: absolute;
        top: 0;
        left: 0;
        width: 640px;
        height: 130px;
        background: url('./img/kong.png');
    }
    .box2{
        position: absolute;
        top: 0;
        left: 0;
        width: 640px;
        height: 130px;
        background: url('./img/man.png');
    }
</style>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <script>
        let box = document.querySelector('.box')
        let box2 = document.querySelector('.box2')

        box.addEventListener('click',function(event){
            let x = event.offsetX
            console.log(x);
            box2.style.width = x + 'px'
        })
    </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
  • 练习

进度条控制


<!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>
<style>
    box{
        position: relative;
        width: 630px;
        height: 20px;
        border: 1px solid blanchedalmond;
    }
    .box1{
        position: absolute;
        top: 0;
        left: 0;
        width: 630px;
        height: 20px;
        background: whitesmoke;
    }
    .box2{
        position: absolute;
        top: 0;
        left: 0;
        width: 630px;
        height: 20px;
        background: blueviolet;
    }
</style>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <script>
        let box = document.querySelector('.box')
        let box2 = document.querySelector('.box2')

        box.addEventListener('click',function(event){
            let x = event.offsetX
            console.log(x);
            box2.style.width = x + 'px'
        })
    </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

事件Dom与Bom