• 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的时间触发时，会一直冒泡到祖先元素。从而通过祖先元素的响应事件来处理事件。
  • 事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能。

target：
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            var lis = document.getElementsByTagName("li");
            var u1 = document.getElementById("u1");
            var btn = document.getElementById("btn");
            // for (var i = 0; i < lis.length; i++) {
            //     lis[i].onclick = function() {
            //         alert("我是超链接");
            //     }
            // }

            u1.onclick = function(event) {
                //解决event浏览器兼容性问题
                event = event || window.event;
                //如果触发的事件是我们期望的元素，否则不执行。
                //创建一个正则表达式，判断一下含有link的class才能被触发。
                var patt1 = /[link]/ig;
                if (patt1.test(event.target.className)) {
                    alert("我是超链接");
                }

            }


            btn.onclick = function() {
                var li = document.createElement("li");
                li.innerHTML = "<a href='javascript: ;'class='link'>新的超链接</a>";
                u1.appendChild(li);

            }
        }
    </script>
</head>

<body>
    <button id="btn">点击</button>
    <ul id="u1">
        <li><a href="javascript:;" class="s link s">超链接</a></li>
        <li><a href="javascript:;" class="link">超链接</a></li>
        <li><a href="javascript:;" class="link">超链接</a></li>
        <li><a href="javascript:;" class="link">超链接</a></li>
    </ul>

</body>

</html>


愿你的坚持终有收获。