js 里面事件的委托、cookie以及严格模式

事件委托

1、什么是事件委托
事件委托，通俗地来讲，就是把一个元素响应事件的函数委托到另一个元素。
2、事件委托的原理
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
3、事件委托的优点
1、减少了事件注册，节省了内存，如在 table 上代理所有 tr 的 click 事件
2、简化了 dom 更新时的事件操作，如现在 table 内增加了一行 tr，不用再为这个 tr 添加事件了
4、事件委托的缺点
1、事件委托基于冒泡，不冒泡的事件无法委托，如 blur、focus、mouseenter、mouseleave、input、keydown、keyup
2、可能被中间层阻止
3、事件会频繁的被调用，比如 tr 的事件被代理到 body 上

<ul class="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>

    var ulele=document.querySelector(".menu");
    ulele.onclick=function (e){
       var target= e.target|| e.srcElement;
        if(target.nodeName.toLowerCase()=="li")
        {
            console.log(1);
        }
    }
</script>

target可以返回事件的目标节点，点击li时由于冒泡原理，会冒泡到ul上，触发ul绑定的点击事件

js cookie

1、什么是cookie
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
1、当用户访问 web 页面时，他的名字可以记录在 cookie 中。
2、在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookie 以名/值对形式存储， 当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息

document.cookie = "USER_KEY=xiaoming;domain=localhost;expires=Fri, 10 Jul 2020 02:60:06 GMT;path=/";
 document.cookie = "PWD=ABCED12GH;domain=localhost;expires=Fri, 10 Jul 2020 02:60:06 GMT;path=/";

cookie的有效期过后会自动删除
expires 有效期
path 指当前cookie的有效路径
设置成功之后读取cookie

var cookie = document.cookie.split(";");
    console.log(document.cookie.replace(/\ /g, ""));
    var user = {};
    var a = cookie[0].split("=");
    var b = cookie[1].split("=");
    user[a[0]] = a[1];
    user[b[0]] = b[1];
    console.log(user);

中文的转码及解码
escape（）转码 不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。
unscape（）解码
*数字 字母 ，+，-，.，/，@，_， 不能转码 解码

 console.log(escape("张三"));
  console.log(unescape(escape("张三")));

编码和解码
atob()：解码一个Base64字符串。
btoa()：从一个字符串或者二进制数据编码一个Base64字符串

console.log(window.btoa("abc123efg"));
console.log(window.atob("YWJjMTIzZWZn"));

console.log(window.btoa(escape("张三")));
console.log(unescape(window.atob("JXU2QkRCJXU4QzQ2")));

中文要在转码之后才可以编码加密

js严格模式

使用 “use strict” 指令
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
“use strict” 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。
严格模式的限制
1、不允许使用为声明的变量

use strict"
     var a;
     a=10;
     console.log(a);//报错

2、不允许删除变量或对象。

   "use strict"
       var a=20;
       delete  a;
       console.log(a); //报错

3、不允许删除函数。

"use strict";
function x(p1, p2) {};
delete x;                // 报错 

4、不允许变量重名:（函数中的形参）

"use strict";
function x(p1, p1) {};   // 报错

5、不允许使用转义字符:

"use strict";
var x = \010;            // 报错

6、不允许使用八进制:

"use strict";
var x = 010;             // 报错

7、不允许对只读属性赋值:

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // 报错

8、不允许对一个使用getter方法读取的属性进行赋值
9、不允许删除一个不允许删除的属性：

"use strict";
delete Object.prototype; // 报错

10、变量名不能使用 “eval” 字符串:

"use strict";
var eval = 3.14;         // 报错

11、变量名不能使用 “arguments” 字符串:

"use strict";
var arguments = 3.14;    // 报错

12、禁止this关键字指向全局对象。

异常处理

js中的异常处理语句有两个，一个是try……catch……，一个是throw。try……catch用于语法错误，错误有name和message两个属性。throw用于逻辑错误。对于逻辑错误，js是不会抛出异常的，也就是说，用try catch没有用。这种时候，需要自己创建error对象的实例，然后用throw抛出异常。

 //这里打开数据库

    try {
        //写的是可能出现异常的代码
        fun1();
        console.log(1);
        //访问数据库
    }
    catch (e) {
        console.log(e);
        //throw e;
        //自定义错误信息
        throw  new Error("函数不存在");
    }
    finally {
        //最终怎么处理
        console.log(1);
        //关闭数据库
    }