Dom事件对象

基础JavaScript

Dom文档对象模型

5. 事件对象

5.1 什么是事件对象

image-20230301155639712

5.2 事件对象的使用

image-20230301155713238

5.3 事件对象的兼容性处理

image-20230301155730708

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
<!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>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div')
        div.onclick = function (e) {
            console.log(e);
            // ie678
            // console.log(window.event);

            // ie678兼容写法(了解就好)
            // e = e || window.event
            // console.log(e);
        }
        // div.addEventListener('click', function () {
        //     console.log(event);
        // })
        // 1、event就是一个事件对象，写到我们侦听函数的 小括号里 当形参看
        // 2、事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
        // 3、事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的  比如鼠标点击包含了鼠标的相关信息，鼠标坐标等，如果是键盘事件里面就包含键盘事件的信息，比如判断用户按下了哪个键
        // 4、事件对象我们可以自己命名，比如event、ent、e...
        // 5、事件对象也有兼容性问题，ie678通过window.event
    </script>
</body>

</html>

5.4 事件对象的属性和方法

image-20230301155814262

5.5 e.target 和 this 的区别

image-20230301160053546

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
50
51
52
53
54
55
<!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>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1、e.traget返回的是触发事件的对象（元素）,this返回的是绑定事件的对象（元素）
        // 区别：e.traget点击了哪个元素，就返回哪个元素
        //      this哪个元素绑定了这个点击事件，就返回谁
        var div = document.querySelector('div')
        div.addEventListener('click', function (e) {
            console.log(e.target);
            console.log(this);
        })

        var ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // 我们给ul绑定了事件，this返回的是ul
            console.log(this);
            // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
            console.log(e.target);
        })

        // 了解兼容性
        // div.onclick = function (e) {
        //     e = e || window.event
        //     var target = e.targe.srcElement
        //     console.log(target);
        // }

        // 了解跟this有个非常相似的属性currentTarget,ie678不认识
    </script>
</body>

</html>

5.6 阻止默认行为

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
<!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>Document</title>
</head>

<body>
    <div>123</div>
    <a href="http://baidu.com">百度</a>
    <form action="http://baidu.com" method="post">
        <input type="submit" value="提交" name="submit">
    </form>
    <script>
        // 常见事件对象的属性和方法
        // 1、返回事件类型
        var div=document.querySelector("div")
        div.addEventListener('click', fn)
        div.addEventListener('mouseover', fn)
        div.addEventListener('mouseout', fn)

        function fn(e){
            console.log(e.type);
        }
        // 2、阻止默认行为（事件）preventDefault()
        var btn=document.querySelector('a')
        btn.addEventListener('click',function(e){
            e.preventDefault() //Dom标准写法
        })

        // 3、传统的注册方法
        btn.onclick=function(e){
            // 普通浏览器
            e.preventDefault() //Dom标准写法
            // 低版本浏览器ie678
            e.returnValue
            // return false 也能阻止默认行为，没有兼容性问题
            // 特点：后面的代码alert('demo')不执行，而且只限于传统的注册方法
            return false
            alert('demo')
        }
    </script>
</body>

</html>

5.7 阻止事件冒泡

image-20230301160328596

image-20230301160342039

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
50
51
52
53
54
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

</html>

5.8 事件委托

image-20230301160622493

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
<!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>Document</title>
</head>

<body>
    <ul>
        <li>wowwow!点击有弹框！</li>
        <li>wowwow!点击有弹框！</li>
        <li>wowwow!点击有弹框！</li>
        <li>wowwow!点击有弹框！</li>
        <li>wowwow!点击有弹框！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            alert('wowwow!点击有弹框！')
            // e.target这个我们可以得到我们点击的对象
            for(var i = 0; i <ul.children.length; i++) {
                ul.children[i].style.backgroundColor =''
            }
            e.target.style.backgroundColor ='skyblue'
        })
    </script>
</body>

</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~