【web】存储事件和表单事件

存储事件

localStorage

本地存储

只能存基本数据类型

sessionStorage

会话存储

cookie

数据管理方式不同：

• localStorage数据存储到本地，需要手动删除；存储量大
• sessionStorage数据依赖浏览器，当页面关闭或者退出浏览器时清空数据；存储量大
• cookie可以为数据设置过期时间；存储量小；可以与后台共用

JSON

• JSON是一种特殊格式的字符串，
• 可以与数组，对象进行转换，
• 常用于前后端数据交互，文件配置说明

表单事件

事件	说明
focus	元素获得焦点时触发
blur	元素失去焦点时触发
submit()	提交表单
change	当input、.textarea元素value值改变且失去焦点
input	当input、.textarea元素value值改变同步触发

change与input事件区别

change：内容被修改并且失去焦点，执行

input：内容被修改，执行

阻止默认事件

e.preventDefault();

阻止冒泡事件

事件冒泡与事件捕获

• 事件都是：先发生事件捕获再发生事件冒泡

• 事件捕获：同类型事件，父级向子级传递

• 事件冒泡：同类型事件，子级向父级传递

阻止冒泡

e.stopPropagation()

加给谁，谁阻止

闭包

• 函数内实现另一函数
• 局部变量数据持久化
• 造成一定的内存压力

<script>
    var arr=['柯南','小兰','新一','服部','毛利']
    for(var i=0;i<arr.length;i++){
        var p=document.createElement('p');
        p.innerHTML=arr[i];
        document.body.appendChild(p);

        // p.οnclick=function(){
        //     // i是全局i最后=5
        //     alert(arr[i]);
        // }

        // 1.OOP
        // p.index=i;
        // p,οnclick=function(){
        //     alert(arr[this.index])
        // }

        // 2闭包
        // 函数内实现另一函数
        // 局部变量数据持久化
        // 造成一定的内存压力

            // 自执行函数
            // 形参的本质：局部变量
        (function(index){
            p.onclick=function(){
                alert(arr[index])
            }
        })(i)

    }
    
</script>

事件委托

事件委托就是：把事件添加给标签的父元素，通过事件对象e.target来实现具体的操作

document.body.onclick=function(e){
        console.log(e.target.innerHTML);
    }