大纲知识点

JS中的常用事件

什么叫做事件

所谓的事件，是浏览器监听用户行为的一种机制。
比如，当用户使用鼠标 “点击” 一个按钮，会触发该按钮的“点击”事件 如果此时我们想要执行代码 就可以通过JS脚本设置“点击”事件
同样的，如果用户鼠标双击一个按钮，会触发该按钮的双击事件 
类似的事件还有很多

事件的分类

鼠标事件
    click 点击事件
    dblclick 双击事件
    mousedown 鼠标按下事件
    mouseup 鼠标抬起事件(一次click包含一次mousedown和一次mouseup)
    mouseover 鼠标进入事件
    mouseenter 鼠标进入事件
    mouseout 鼠标离开事件
    mouseleave 鼠标离开事件
    mousemove 鼠标移动事件
键盘事件
    keydown 键盘键被按下
    keyup   键盘键被松开
    keypress 输入
浏览器的事件
    load 页面中所有资源都被加载完毕的时候
    scroll 页面的卷动
焦点事件
    focus 当一个元素获取到焦点时
    blur 当一个元素失去焦点时
移动端事件
    touchstart  触摸开始事件 会在手指按下的时候触发
    touchmove   触摸并移动  会在手指按下并移动的时候触发
    touchend    触摸结束事件  会在手指离开的时候触发
其它事件
    animationstart  动画开始时触发 
    animationend    动画结束时触发
    transitionend   过渡结束时触发

绑定事件

绑定事件的第一步 获取元素

    // HTML代码
    <button id="btn">点我试试看</button>
    // JS代码
    function click() {
        console.log("你好");
    }
    btn.onclick = click;

函数中的this

this是函数中的一个对象 只能够通过点语法和方括号语法修改或者访问 不能够通过 = 修改 因为它直接指向内存
特点：
    在函数定义的时候，无法确定指向
    只有在函数调用的时候，才可以确定指向
指向规则：
    谁调用 this就指向谁
    当没有明确的调用者时，指向window

```JavaScript
    var fun = function() {
        console.log(this);
    }
    var obj = {};
    obj.demo = fun;
    
    // 设置为元素的事件
    btn.onclick = fun;


    fun(); // 指向window 因为没有明确的调用者
    obj.demo(); // 指向obj 因为是obj在调用
    // 当点击btn时 this指向 btn 因为是触发了 btn的该事件
```

字符串

存储： 计算机只能够存储二进制 所以存储字符串时 也需要转为二进制 所以就需要有一个对照表 方便将字符和二进制进行转换 这样的内容叫做编码方式 常见的有 ascii unicode 等

定义字符串的新的方式

    var str = new String("a");
    console.log(typeof str); // object
    // 转换为字符串的方式就是str.toString();

包装类型：在面向对象的思想中，一切都得是对象。而JS中有一些基本类型，此时就需要“包装”一下，将这些基本类型包装成对象类型。

字符串的length属性

字符串也有length属性

    var a = "abcdefg";
    console.log(a[2]); // c

字符串也可以通过下标获取对应的字符

常见的方法

charAt 参数是数字 返回值是该数字所指向的下标字符

    var str = "abcdefg";
    // 获取指定位置的字符
    var code = str.charAt(5);
    console.log(code); // f

charCodeAt 参数是数字 返回值是该数字所指向的下标字符的编码

    var str = "abcdefg";
    var code = str.charCodeAt(5); 
    console.log(code); // 102 

split 参数是分隔符 返回值是以该参数作为切割之后的数组

    var str = "a1b1c1d1e1f"; // 想要以1作为分隔符 将字符串切割成数组 => ["a", "b", "c", "d", "e", "f"];
    var arr = str.split("1");
    console.log(arr); // ["a", "b", "c", "d", "e", "f"];

    // 数组转为字符串
    // ["a", "b", "c", "d", "e", "f"].join("1"); => a1b1c1d1e1f

substring 该方法用于截取字符串中的一段

    var str = "abcdefg";
    var str1 = str.substring(1, 2);
    var str2 = str.substring(1);
    var str3 = str.substring();
    var str4 = str.substring(-5, -2);
    var str5 = str.substring(5, 1);
    console.log(str1); // b
    console.log(str2); // bcdefg
    console.log(str3); // abcdefg
    console.log(str4); // 空字符串 截取不到
    console.log(str5); // bcde
    // 特点：两个参数时，总是从小的截取到大的
    // 特点：当数值为负数时 不会从后往前数

substr 该方法也用于截取字符串中的一段 第一个参数依旧表示截取的开始位置 第二个参数表示要截取的字符串的长度

    var str = "abcdefghijkl";
    var str1 = str.substr(3, 5);
    console.log(str1);

slice 该方法用于截取字符串的一段 第一个参数表示截取的开始位置(包含) 第二个参数表示截取的结束位置(不包含)

    var str = "abcdefghijkl";
    var str1 = str.slice(1, 5);
    var str2 = str.slice(5, 1);
    var str3 = str.slice(-5);
    console.log(str1); // bcde
    console.log(str2); // 空字符串 因为截取不到
    console.log(str3); // hijkl 从后往前截取

indexOf 该方法用于获取数组中第一个从某个位置开始出现的字符串的第一个字符的下标 如果找不到 就返回-1 第一个参数是被查询的字符串 第二个参数是查询的开始位置

    var str = "abcdefgdfdfdf";
    var index = str.indexOf("df");
    console.log(index); // 

toLowerCase 该方法用于将所有的字符串中的英文小写

    var str = "ABCDEFG,你好,abcde";
    var str1 = str.toLowerCase();
    console.log(str1); // abcdefg,你好,abcde

字符串的比较 一位一位的比较 比较对应位数的字符的ascii码 如果相同 比较下一位 如果不同 出结果

    var str = "aA"; // ascii A 65
    var str1 = "aa"; // ascii a 97 
    console.log(str > str1); // false

toUpperCase 该方法用于将所有的字符串中的英文大写

    var str = "abc";
    var str1 = str.toUpperCase();
    console.log(str1); // ABC

    // replace 该方法用于将字符串中的指定字符(串)替换位指定字符(串)
    // var str = "今天天气不错，没下雨";
    // var str1 = str.replace("没", "");
    // console.log(str1);

郑重声明: 所有的字符串方法都不会改变原字符串

为什么字符串居然能够调用方法，它不是基本数据类型吗？

值类型就是值类型 不应该拥有任何方法的

其实…

var a = "str";
var b = a.replace("s", "a");

字符串这个数据类型，在JS中运行时
JS引擎中解析的时候会先把 a 这个"str"值替换为 var s = new String(“str”);
当a.replace方法调用的时候 等价于

var s = new String("str");
var b = s.repalce("s", "a");
s = null;

因为真正操作的时候是新生成的对象内部在操作 a所保存的"str"只是作为参数传递了进去 在里面复制了一份 操作的是这个"副本" 最终会销毁这个生成的对象

函数的传参规则

JS中的函数可以执行时传递参数。那么如果在函数内部修改传递进去的参数，会不会影响到函数外部的值呢？
函数在传递参数时，到底是如何传参的呢？

JS中的数据类型分两种: 基本数据类型，引用数据类型

基本数据类型的数据在传递时，复制传递 也就是复制了一份并传递进去 所以在函数内部，如何操作都只是在操作副本。与外部的数据无关。
引用数据类型的数据在传递时，传递引用 也就是把地址复制了一份并传递进去 所以函数内部是可以得到函数外部的数据保存的地址的，如果在函数内部打点或者方括号修改地址内容，则会影响到函数外部，如果在函数内部使用=修改变量保存的内容，则不会影响函数外部。

    // 在函数内部修改值类型参数
    var a = 123;
    function demo(b) {
        b = 12;
    }
    demo(a);
    console.log(a); // 123

    // 在函数内部使用等号修改引用类型参数
    var obj = {};
    function demo(b) {
        b = 123;
    }
    demo(obj);
    console.log(obj); // {}

    // 在函数内部使用方括号或者点语法修改引用类型参数
    var obj = {};
    function demo(b) {
        b.a = 10;
        b["b"] = 11;
    }
    demo(obj);
    console.log(obj); // {a: 10, b: 11}

    // 在函数内部先使用方括号或者点语法修改 再使用等号
    var obj = {};
    function demo(b) {
        b.a = 10;
        b["b"] = 11;
        b = {};
        b.c = 12;
    }
    demo(obj);
    console.log(obj); // {a: 10, b: 11} 

严格模式

因为JS是一门很随心 很随意的语言 而且因为设计之初遗留了很多不好的地方 这就给开发人员制造了很多困扰 而且也有开发人员给开发人员制造困扰
为了解决这些问题 ES5 中 增加了一个 "严格模式" 严格要求开发人员的代码书写

开启严格模式

在当前作用域的第一行 使用字符串 "use strict";

1 声明变量必须使用var

num = 10;
console.log(num);
// 开启严格模式之后 报错： num is not defined

2 函数的形参不可以重名

function demo(a, a, b, c, d) {
    console.log(a, b, c, d);
}
demo(1, 2, 3, 4, 5);
// 开启严格模式之后 报错：Uncaught SyntaxError: Duplicate parameter name not allowed in this context

3 不可以使用八进制

var num = 044;
console.log(num); // 36
// 开启严格模式之后 报错：Uncaught SyntaxError: Octal literals are not allowed in strict mode.

4 不可以使用保留字作为变量名

var implements = 123;
console.log(implements);
// 开启严格模式之后 Uncaught SyntaxError: Unexpected strict mode reserved word

5 eval

eval("var a = 10;");
console.log(a);
// 开启严格模式之后 eval执行的代码 不会影响到当前的作用域了 会独立给eval强制开辟一个作用域
// Uncaught ReferenceError: a is not defined 
留字作为变量名

```JavaScript
var implements = 123;
console.log(implements);
// 开启严格模式之后 Uncaught SyntaxError: Unexpected strict mode reserved word

5 eval

eval("var a = 10;");
console.log(a);
// 开启严格模式之后 eval执行的代码 不会影响到当前的作用域了 会独立给eval强制开辟一个作用域
// Uncaught ReferenceError: a is not defined