|
@@ -0,0 +1,36 @@
|
|
|
|
|
+<!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>
|
|
|
|
|
+<body>
|
|
|
|
|
+ <!--
|
|
|
|
|
+ 事件委托：
|
|
|
|
|
+ 利用事件冒泡的特性
|
|
|
|
|
+ 把原来要绑定在子元素上的事件 绑定到他的父元素上
|
|
|
|
|
+ 触发子元素的时候 时间会冒泡到父元素上
|
|
|
|
|
+ 父元素通过判断事件源来执行对应的逻辑
|
|
|
|
|
+ 优势：
|
|
|
|
|
+ 减少内存
|
|
|
|
|
+ 精简代码
|
|
|
|
|
+ -->
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li>1</li>
|
|
|
|
|
+ <li>2</li>
|
|
|
|
|
+ <li>3</li>
|
|
|
|
|
+ <li>4</li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <script>
|
|
|
|
|
+ let uls = document.querySelector("ul");
|
|
|
|
|
+ let lis = document.querySelectorAll("ul li");
|
|
|
|
|
+ uls.onclick = function(event) {
|
|
|
|
|
+ console.log(event);
|
|
|
|
|
+ if(event.target.nodeName == "LI") {
|
|
|
|
|
+ console.log(event.target.innerText);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|
zheng