事件委托
概念
事件委托就是利用事件冒泡,只指定一个事件管理函数（一般是父节点）,就可以处理一个类型的所有事件（子孙节点）。
为什么要用事件委托
比如说ul>li* 1000,每一个li都需要一个click事件。如果不用事件委托，就要通过循环添加1000个click事件。
这样做有什么后果？
- 事件处理函数越多会降低页面整体运行性能。访问dom的次数越多，性能越差
- 一个函数就是一个对象。对象越多，占用内存越大，性能也就越小。
如果用事件委托，只需要给ul添加一个click函数，只用访问一次dom,添加一个事件函数。
事件委托的原理
子节点（比如说li）委托它们父级(ul)代为执行事件。事件委托的精髓在于不需要遍历元素的子节点，直接给父级添加事件就行，大大减少了dom的操作，节约了内存。
其他
方法
- event上面有target属性
- event原型链上的Event对象上面有stopPropagation事件（阻止冒泡）和preventDefault事件（阻止默认行为）
js获取子节点，父节点，兄弟节点
获取子节点
<body>
<div id="parent">
<div id="son1"></div>
<div id="son2"></div>
<div id="son3"></div>
</div>
</body>
<script>
//通过dom形式来获取子节点
let son=document.querySelector('#parent').querySelectorAll('div')
console.log(son); //返回一个NodeList NodeList(3) [div#son1, div#son2, div#son3]
console.log(Object.prototype.toString.call(son)); //返回[object NodeList]
//通过childNodes来获取子节点(有误差)
let son1=document.querySelector("#parent").childNodes
console.log(son1); //会将回车和空格认为是#text NodeList(7) [text, div#son1, text, div#son2, text, div#son3, text]
//通过children来获取子节点
let son2=document.querySelector('#parent').children
console.log(son2);//返回HTMLCollection(3) [div#son1, div#son2, div#son3, son1: div#son1, son2: div#son2, son3: div#son3]
console.log(Object.prototype.toString.call(son2)); //[object HTMLCollection]
let son3=document.querySelector('#parent').firstChild //返回#text
console.log(son3);
let son4=document.querySelector('#parent').firstElementChild //第一个子节点
console.log(son4);
let son5=document.querySelector('#parent').lastElementChild //返回最后一个子节点
console.log(son5);
let parent=son5.parentNode
console.log(parent);
//body下面的所有节点，包括body
let parents=son5.offsetParent
console.log(parents);
let son6=son5.previousElementSibling
console.log(son6);
let son7=son6.nextElementSibling
console.log(son7);
</script>
API总结
| 标题 | |
|---|---|
| 子节点 | childNodes,children ,firstElementChild,lastElementChild |
| 父节点 | parentNode,offsetParent |
| 兄弟节点 | previousSibling,nextSibling |
