乐淘总结第三天 - Githubissues

总结

事件委托
- 原理 event对象

<!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>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
    // var list = document.querySelectorAll('ul>li');
    // for(var i=0;i<list.length;i++){
    //     list[i].onclick = function(){
    //         console.log(this.innerHTML);
    //     }
    // }
    document.querySelector('ul').onclick = function(event){
        // console.log(event);
        if(event.srcElement.tagName == 'LI'){
            // console.log('点击了li标签')
            // console.log(event.srcElement)
            console.log(event.srcElement.innerHTML);
        }
    }
    </script>
</body>
</html>

+ 优点
    1. 快，性能更高
+ 适用场景
    1. 有些元素在刚开始的时候是不存在的，我们这个时候就需要给它绑定事件
+ ajax的执行时机（同步、异步代码执行流程）

本地存储相关知识点
- localStorage对象是内置对象
  - localStorage.getItem('a') ---> 要么是字符串，要么是null
  - localStorage.setItem('a','100') --> 值只能是字符串
  - localStorage.removeItem('a')
  - localStorage.clear()全删
- 一般会和JSON对象结合起来用
  - JSON.stringify把数组、对象转换成json类型的字符串
  - JSON.parse把json类型的字符串转换成数组、对象
两个页面之间的“通信”
- 我们现在只会前端
- location
  1. location.href
  2. location.search
  3. location.assign
  4. 锚点 location.hash
  5. location.reload()重新加载
?a=1&b=2
- a的值
- 转换成对象 {a:1,b:2}

zhengwei1949 / myblog

乐淘总结第三天 #132

总结