Dom事件进阶

基础JavaScript

Dom文档对象模型

1. 注册事件

1.1 传统注册

image-20230301154845640

1.2 监听注册

image-20230301154903858

2. 事件监听

2.1 监听API

image-20230301155009406

2.2 事件监听兼容性解决方案

image-20230301155026078

2.3 代码解释

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
56
<!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>
    <button>1、传统注册事件</button>
    <button>2、方法监听注册事件</button>
    <button>attacheEvent()事件监听（IE678支持）</button>
    <script>
        var btns = document.querySelectorAll('button')
        // 1、传统注册事件
        btns[0].onclick = function () {
            alert('1、传统注册事件11')
        }
        // (2) 同一个元素 同一个事件只可以一件事件处理程序
        btns[0].onclick = function () {
            alert('1、传统注册事件22') // 只会执行这个
        }

        // 2、方法监听注册事件 addEventListener()事件监听（IE9以后支持）
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        btns[1].addEventListener('click', function () {
            alert('2、方法监听注册事件11')
        })
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function () {
            alert('2、方法监听注册事件22')
        })

        // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function () {
            alert(11);
        })

        // 4、兼容行问题解决办法（了解，方法1、2就可以满足大部分注册需求）
        function addEventListener(element, eventName, fn) {
            //判断当前浏览器是否支持addEventListener方法
            if (element.addEventListener) {
                element.addEventListener(eventName, fn);//第三个参数黑默以是false
            } else if (element.attachEvent) {
                element.attachEvent('on' + eventName, fn)
            } else {
                //相当于element.onclick=fn;
                element['on' + eventName] = fn;
            }
        }
    </script>
</body>

</html>

3. 删除事件（解绑事件）

image-20230301155405324

image-20230301155421956

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
56
57
58
59
60
61
<!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>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div')
        // 传统方法 eventTarget.onclick = null
        divs[0].onclick = function () {
            alert('Clicked1')
            // 1、传统删除解绑（不再执行click事件）
            divs[0].onclick = null
        }

        // 现有方法 eventTarget.removeEventListener('click', fn)
        divs[1].addEventListener('click', fn) //里面的fn 不需要调用加小括号
        function fn() {
            alert('Clicked2')
            divs[1].removeEventListener('click', fn)
        }

        // 3. eventTarget.detachEvent('onclick', fn1);
        divs[2].attachEvent('onclick', fn1)
        function fn1() {
            alert('Clicked3');
            divs[2].detachEvent('onclick', fn1)
        }

        // 4、兼容行问题解决办法（了解，方法1、2就可以满足大部分注册需求）
        function removeEventListener(element, eventName, fn) {
            //判断当前浏览器是否支持
            removeEventListener方法
            if (element.removeEventListener) {
                element.removeEventListener(eventName, fn)//第三个参数默认是false
            }
            else if (element.detachEvent) {
                element.detachEvent('on' + eventName, fn)
            } else {
                element['on' + eventName] = null
            }
        }
    </script>
</body>

</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~