小饶学编程之JAVA SE第二部分——Web 前端基础：10JavaScript

蔚落 2022-12-24 12:58 187阅读 0赞

### JavaScript ###

*   *   *  1. JavaScript概述
         *   *  1.1 历史
             *  1.2 JavaScript组成
             *  1.3 JavaScript特征
         *  2. JavaScript基础语法
         *   *  2.1 JS的引入
             *  2.2 注释
             *  2.3 变量
             *  2.4 调试
             *  2.5 流程控制
             *  2.6 关键字跟保留字
         *  3. 数据类型
         *   *  3.1 基本数据类型
             *   *  3.1.1 number
                 *  3.1.2 string
                 *  3.1.3 boolean
                 *  3.1.4 undefined
                 *  3.1.5 null
             *  3.2 引用数据类型
             *   *  object
         *  4. 运算符
         *   *  算术运算符
             *  比较运算符
             *  逻辑运算符
             *   *   *  
         *  5. 函数
         *   *  5.1 函数的定义
             *  5.2 函数的调用
             *  5.3 函数参数
         *  6. 数组
         *   *  数组的定义
         *  7. 对象
         *   *  内置对象
             *   *  String
                 *  Array
                 *  Date
                 *  JSON
             *  自定义对象
             *   *  对象的定义
                 *  对象的使用
         *  8. 原型与原型链
         *  9. BOM
         *   *  9.1 window
             *  窗口尺寸
             *  系统对话框
             *  定时器
             *  窗口移动
             *  打开窗口
             *  9.2 document
             *  9.3 location
         *  10. DOM
         *   *  10.1 document节点
             *  10.2 element节点
             *  10.3 CSS
         *  11. 事件
         *   *  11.1常用事件句柄
             *  11.2 事件的绑定
             *  11.3 表单的校验
             *  11.4 事件冒泡
             *  11.5 event对象
             *  11.6 事件的委托/代理

### 1. JavaScript概述 ###

#### 1.1 历史 ####

JavaScript是世界上最流行的脚本语言。1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。网景公司的整个管理层，都是Java语言的信徒，Sun公司完全介入网页脚本语言的决策。因此，Javascript后来就是网景和Sun两家公司一起携手推向市场的，这种语言被命名为"Java+script"并不是偶然的。

此时，34岁的系统程序员Brendan Eich登场了。仅仅一个月之后，1995年5月，网景公司做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快上手。Brendan Eich被指定为这种"简化版Java语言"的设计师。但是，他对Java一点兴趣也没有。**为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了**。

![在这里插入图片描述][20201128143611765.png]

**ECMAScript**是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。目前主流版本为ES6。

#### 1.2 JavaScript组成 ####

*  核心语法(ECMAscript)
 *  文档对象模型 (DOM Docuemtn Object Model) ，JS与HTML文档交互。
 *  浏览器对象模型（BOM Browser Object Model)，JS与游览器交互。

#### 1.3 JavaScript特征 ####

JavaScript是一种解释型脚本语言，或者动态语言。是一种弱类型语言，意味着里面的类型可以变化。

*  编译型语言，需要经历编写-编译-链接-运行。比如java、c++等。
 *  解释型语言，解释型语言没有编译结果

### 2. JavaScript基础语法 ###

#### 2.1 JS的引入 ####

HTML中有3种方式写入JS代码。

*  写在标签属性
    
        <a href="#" onclick="alert('hello world')">点击我</a>
 *  写在script标签中
    
        <script type="text/javascript">			
            alert("hello world...");			
        </script>
 *  写在外部的JS文件中
    
    js/hello.js
    
        alert("hello world...");
    
    index.html
    
        
        <script src="js/hello.js" type="text/javascript"></script>

#### 2.2 注释 ####

JS中的注释同Java。

*  // 单行注释
 *  /\* \*/ 多行注释
 *  /\*\* \*/ 多行注释

#### 2.3 变量 ####

变量是用来存储数据的，操作变量来间接操作内存中空间的数据。由于JS是弱类型语言，变量类型是动态的，故定义的时候不需要定义变量类型，使用var即可。

*  变量命名规范：
    
     *  不允许使用js关键字和保留关键字
     *  可以包含字母、数字、下划线\_以及$
     *  变量名不能以数字开头
     *  可以用中文，但是不推荐使用
     *  见名知意（驼峰）
 *  变量的声明提前
    
    所有变量的声明，会自动提升到代码(当前作用域)的最顶部。声明提前破坏了程序的执行顺序，所以大家知道原理即可，切勿在实际开发过程中使用，不仅会降低代码可读性，还容易造成程序错误。
    
        1 console.log(a);               //undefined
        2 var a; // 这行代码相当于插入到最开始
        3 a=10;
        4 console.log(a

#### 2.4 调试 ####

*  alert将数据弹出
 *  document.write();在文档内输出
 *  console.log在游览器的控制中输出
 *  在游览器的开发控制台的Sources面板中断点调试

#### 2.5 流程控制 ####

条件分支跟循环参考Java，此处省略。

#### 2.6 关键字跟保留字 ####

JS中我们在命名规范中不能使用系统的关键字跟保留字。

*  关键字  
    ![在这里插入图片描述][20201128143731410.png_pic_center]
 *  保留字

![在这里插入图片描述][20201128143738825.png_pic_center]

### 3. 数据类型 ###

变量没有类型，但是值有类型，可以通过`typeof`运算符检查值类型。

var i = 1 ;
    console.log(typeof i );

*  原始类型（基本类型）：按值访问，可以操作保存在变量中实际的值。原始类型汇总中null和undefined比较特殊，5种。
 *  引用类型：引用类型的值是保存在内存中的对象。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center]

#### 3.1 基本数据类型 ####

##### 3.1.1 number #####

数字类型，既可以表示整数，也可以表示小数。

123 //整数
    123.1 //小数
    1.1e3 // 科学计数法
    -9 // 负数
    NaN // not a number 
    Infinity // 无穷大
    -Infinity // 负无穷大
    0x11a // 16进制
    0755 // 8进制
    0b10101 // 2进制

*  NaN不等于任何值，包括它自身。所以只能通过全局函数`isNaN()`来判断。
 *  Infinity比任何数字都要大。
 *  \-Infinity比任何数字都要小。

##### 3.1.2 string #####

*  字符串表示一段文本符号数据。由字符、数字、符号、特殊字符等组成。JS中的字符串可以用单引号也可以使用双引号。
    
        "hello"
        'hello \n world'
 *  字符串模板：模板字符串是ES6增加的用于定于字符串的新特性，支持字符串直接换行而不需要转义，且支持插值 `${}`
    
        var name = "seven";
        		   
        var msg = ` 你好，
        	${
                name} `;

##### 3.1.3 boolean #####

*  布尔类型，只有`true`跟`false`2个值，表示结果是真还是假。
 *  boolean也可以进行算术运算，true当做1，false当做0。

##### 3.1.4 undefined #####

表示未定义。

##### 3.1.5 null #####

表示空，不存在。从逻辑角度上看，null是一个空的对象指针。而这也正是使用typeof操作符检测null值，会返回“object”的原因。

#### 3.2 引用数据类型 ####

也就是对象类型Object type，比如：Object 、Array 、Function 、Data等，以及自定义的。

##### object #####

对象，是一组数据和功能（函数）的集合。可以用new操作符后跟要创建的对象类型的名称来创建。也可以用字面量表示法创建。

var person = {
        name:'zhangsan'} // 方式1： 字面量的方式
    var obj1= new Object();        // 方式2： 构造方法

### 4. 运算符 ###

#### 算术运算符 ####

`+` `-` `*` `/` `%` `++` ```--``**```

*  `+`用在字符串上表示字符串的拼接。
 *  可以通过（）改变运算的优先级。
 *  浮点数也有小尾巴的问题(0.1 + 0.2 )，尽量避免。可以使用number的toFixedf方法来四舍五入。
 *  `++` `--` 只能作用在变量上，不能作用在值上面。
 *  `/`除数为0，结果是无穷
    
        console.log(-1/0); // -Infinity
        console.log(1/0);  // Infinity
        console.log(0/0)   //  NaN
        console.log(isNaN(0/0))  // true
 *  `**`表示计算幂，优先级比较高
    
        console.log(3**4); // 81
        console.log(-3**3); // 报错
        console.log((-3)**3); // -27
        console.log(-(3**3)); // -27

#### 比较运算符 ####

比较运算符的结果是一个boolean类型。

`>` `<` `>=` `<=` 用法同JAVA

*  `==`
    
    等于，js中`==`只判断2个值是否相等，不考虑类型。
    
        "1" == 1  // true
        1 == true   // true
        0 == false   // true
        null == undefined // true
        NaN == NaN // false
 *  `===`
    
    绝对等于，js中用来判断值跟类型都必须相同。
    
        "1" === 1  // false
        "1" === "1"  // true
        NaN === NaN // false

#### 逻辑运算符 ####

逻辑运算符同java中逻辑运算符，也具有短路功能。结果是一个boolean类型。

&&  2个都为真则为真
    ||  有一个为真则为真
    ！  真即假，假即真

######  ######

### 5. 函数 ###

JS中通过函数来把一段逻辑封装用来重复使用。函数式通过关键字`function`来定义的。

*  JS中的函数不需要定义返回类型，直接返回结果即可
 *  JS中的函数参数列表不需要定义类型以及var，只需定义变量名
 *  函数需要调用才会执行，不调用是不会执行的
 *  函数没有重载，只要方法名相同就会去执行，不管参数列表匹配与否
 *  如果定义了多个方法名相同，后面覆盖前面的

#### 5.1 函数的定义 ####

> 定义方式一

/* 语法
    function 函数名(参数列表){ 
        函数体；
    }*/
    
    function study（）{
        
        console.log("好好学习，天天向上。");
    }

> 定义方式二

/* 语法
    var  函数名 = function(参数列表){ 
        函数体；
    }*/
    
    var study = function(){
        
        console.log("好好学习，天天向上。");
    }

> 定义方式三(不推荐)

/*
    	语法：参数跟函数体都必须在字符串内，Function的F必须大写
    new Function(arg1, arg2, ..., argN, function_body);
    */
    
    var study = new Function("name", "time","console.log(name+'每天学习'+time+'分钟');console.log('继续保持')");

#### 5.2 函数的调用 ####

> 函数的调用（方式一）

/* 
    语法： 函数名(参数值)
    */
    study("seven",180);

> 函数的调用（方式二）

/*
    语法： 函数名.call(调用对象，参数值)
    */
    study.call(this,"seven",180 );

> 函数的调用（方式三）

/*  
    参数需要封装到数组中
    语法： 函数名.apply(调用对象，参数值数组)
    */
    study.apply(this,['seven',120]  );

> 函数的调用（方式四）

/*
    bind会返回新的函数，需要调用才会执行，所以后面需要(),其它跟call用法一样。
    语法： 函数名.bind(调用对象，参数值)()
    */
    study.bind(this,"seven",180 )();

#### 5.3 函数参数 ####

JS中的参数都会封装到`arguments`中，在函数体中可以通过这个参数拿到定义参数以外的参数值。

var study = function(name , time){
        
        // 传统方式只能拿到定义的参数
        console.log(name);
        console.log(time);
        // 通过arguments可以定义参数以外的参数
        console.log(arguments.length);
        console.log(arguments[0]);
        console.log(arguments[1]);
        console.log(arguments[2]);
        console.log(arguments[3]);
        
        console.log(name+'每天学习'+time+'分钟');
    }
    
    study("zhangsan",180,1,"a");

ES6也支持类似Java中的可变长度参数

var study = function(name , time ,  ... args){
        
        console.log(args);
    }

### 6. 数组 ###

用来装元素的集合。

*  JS中的数组中的类型可以不一样。
 *  JS中数组下标越界不会异常，访问会返回 undefined

#### 数组的定义 ####

// 方式1 
    var arr1 = [1,2,3,true,2.1,'hello',null ];
    // 方式2 
    var arr2 = new Array(1,2,3,true,2.1,'hello',null);
    
    console.log(arr1[100]);// undefined

### 7. 对象 ###

JS中的对象分为3类：

*  内置对象（**Array**、**Boolean**、**Date**、**Function**、**Global**、**Math**、**Number**、**Object**、**RegExp**、**Error**、 **String** ）
 *  宿主对象（**BOM**/**DOM**）
 *  自定义对象

#### 内置对象 ####

*  ##### String #####
    
        var s = "hello js world ...";
        
        console.log(s.length);// length属性表示字符串长度
        console.log(s[1]);// 可以通过具体的下标访问数组中的字符
        s.toUpperCase();// 转换成大写
        s.toLowerCase();// 转换成小写
        s.indexOf('e')； // 获取字符e出现的位置
        s.substring(3,5)； // 获取子字符串
 *  ##### Array #####
    
        var arr = [1,2,3,4,5];
        
        console.log(arr.length);// length属性表示数组元素个数
        arr.length = 2 ; // 设置长度减小，表示只保留前面的2个元素，剩余的丢掉
        arr.length = 10 ;// 会增加5个元素，增加的都是undefined值
        arr.indexOf(3)；//返回元素3的索引，如果没有返回-1
        arr.slice(3,6)；// 截取子数组，类似String的subString
        arr.push("a","b","c") // 往数组尾部添加元素
        arr.pop(); // 把数组的尾部最后一个元素弹出，也就是删除
        arr.unshift("f"); // 往数组头部添加元素
        arr.shift(); // 把数组的头部第一个元素弹出，也就是删除
        arr.sort();  // 把数组进行排序
        arr.reverse();  // 把数组元素进行反转
        arr.concat(['a','b','c']); // 把新的数组拼接在元素后，会返回新的数组，并没改变原数组
        arr.join("-")；// 把数组中的所有元素拼接在一起，使用设置的分隔符。
        
        // 数组的遍历
        arr.forEach(function(value){
              
            console.log(value);
        });
        
        // 数组的遍历，这里的index是数组中的索引
        for(var index in arr){
              
            console.log( arr[index]);
        }
        
        // 数组的遍历，这里的e是数组中的元素
        for(var e of arr){
              
            console.log( e);
        }
 *  ##### Date #####
    
        var d = new Date();// 定义日期类型
        console.log(d);// 打印当前日期
        console.log(d.getFullYear());// 获取年份
        console.log(d.getMonth());// 获取月份
        console.log(d.getDate());// 获取日
        console.log(d.getDay());// 获取星期几
        console.log(d.getHours());// 获取小时
        console.log(d.getMinutes());// 获取分
        console.log(d.getSeconds());// 获取秒
        console.log(d.getTime());// 获取时间戳
        console.log(d.toLocaleString());// 获取本地日期 
        console.log(d.toLocaleDateString());// 获取本地日期,只有年月日
 *  ##### JSON #####
    
    JSON（JavaScript Object Notation）(http://www.json.org/) 是一种轻量级的**数据交换格式**。 JSON中支持2种数据格式：对象跟数组2种数据。具体支持的值类型有数字、字符串、boolean、null
    
     *  对象用花括号表示\{\}
     *  数组用中括号表示\[\]
     *  数据表现为键值对用：隔开
     *  同级数据用，号隔开
        
            // json对象
               {
                     "name":"seven","age":"18"}
            // json数组，数组里面的元素是对象
               [
                {
                    “name”:"张三","age":"21"},
                {
                    “name”:"李四","age":"22"} 
               ]
    
    > JSON跟JS对象的区别

<table> 
 <thead> 
  <tr> 
   <th align="center">区别</th> 
   <th align="center"><strong>JSON</strong></th> 
   <th align="center"><strong>Javascript</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">含义</td> 
   <td align="center">仅仅是一种数据格式</td> 
   <td align="center">表示类的实例</td> 
  </tr> 
  <tr> 
   <td align="center">传输</td> 
   <td align="center">可以跨平台数据传输，速度快</td> 
   <td align="center">不能传输</td> 
  </tr> 
  <tr> 
   <td align="center">表现</td> 
   <td align="center">1.简直对方式，键必须加双引号 2.值不能是方法函数，不能是undefined/NaN</td> 
   <td align="center">1.键值对方式，键不加引号 2.值可以是函数、对象、字符串、数字、boolean 等</td> 
  </tr> 
 </tbody> 
</table>

*  JS对象转JSON
    
        var user = {
              
            name:"zhangsan",
            age:18,
            sex:"男"
        };
        
        // js对象转JSON对象（JSON.stringify）
        var json = JSON.stringify(user);
        console.log(json); //{"name":"zhangsan","age":18,"sex":"男"}
 *  JSON转JS对象
    
        var user = JSON.parse('{"name":"zhangsan","age":18,"sex":"男"}');
        console.log(user);

#### 自定义对象 ####

##### 对象的定义 #####

*  方式1（字面量）
    
        // 大括号{}表示一个对象
        var user = {
              
        		name:"zhangsan",
        		age:17,
        		sleep:function(){
              
        			console.log("sleeping ... ");
        		}
        	};
 *  方式2（Object）
    
        var user = new Object();
        user.name = "zhangsan";
        user.age = 17 ;
        user.sleep = function(){
              
            console.log("sleeping ... ");
        }
 *  方式3（工厂模式）
    
        function createUser(name,age){
              
            var user = new Object();
            user.name = name ;
            user.age = age ;
            user.sleep = function(){
              
                console.log("sleeping ... ");
            };
            return user;
        };
 *  方式4（构造方法）
    
        // 构造方法名首字母大写，用以区分其他普通函数
        function User(name,age){
              
            this.name = name;
            this.age = age ;
            this.sleep = function(){
              
                console.log("sleeping ... ");
            };
        }
        
        var u1 = new User("zhang",111);
 *  方式5（Object.create）
    
        // 类似java中的clone
        var user1 = {
              name:"zhangsan",age:18};
        var user2 = Object.create(user1);

##### 对象的使用 #####

var person = {
        
        name:"zhangsan",
        age:19,
        sex:"男",
        sleep:function(){
        
            console.log("早睡早起身体好。");
        }

*  属性的访问跟赋值
    
        person.name 
        person["name"]
        person.name = "seven"；
        person["name"] = "seven"；
        
        person.height // 使用对象的一个不存在的属性不会报错，undefined
 *  动态的删除属性
    
        delete person.name ;// 动态的删除person对象的name属性
 *  动态的添加属性
    
        person.hello = "hello";// 直接给新的属性赋值即可
        person.eat =function(){
              console.log("吃");} // 函数也一样。
 *  判断属性是否在这个对象中
    
        'name' in person  // 判断name属性是否存在person对象或者父类对象中。
        'sleep' in person // 判断sleep函数是否存在person对象或者父类对象中。
        person.hasOwnProperty("name");// 判断name属性是否存在person对象中，不包括父类的
        person.hasOwnProperty("sleep");// 判断sleep函数是否存在person对象中，不包括父类的

### 8. 原型与原型链 ###

我们先通过构造函数创建一个对象

function Person() {
        
    
    }
    //Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person
    var person = new Person();
    
    person.name = 'seven';
    console.log(person.name) // seven

JS在创建对象的时候都会创建对应类型的原型。

![在这里插入图片描述][20201128143917932.png_pic_center]

*  当我们给Person添加属性跟方法的时候，可以添加在对象中，也可以添加在原型中。区别是对象中的属性是独立的，原型中的属性是所有对象共享的。
 *  当访问对象的属性跟方法时，先去对象中找，找不到再去原型中找。
    
        function Person() {
              
        
        }
        // 虽然写在注释里，但是你要注意：
        // prototype是函数才会有的属性
        Person.prototype.name = 'seven';
        var person1 = new Person();
        var person2 = new Person();
        console.log(person1.name) // seven
        console.log(person2.name) // seven
 *  每一个JS对象都有一个属性`__proto__`,这个属性会指向该对象的原型.

![在这里插入图片描述][20201128143942246.png_pic_center]

function Person() {
        
    
    }
    var person = new Person();
    console.log(person.__proto__ === Person.prototype); // true

*  每个对象跟原型都有一个 constructor 属性指向关联的构造函数实例原型指向构造函数。

![在这里插入图片描述][2020112814384133.png_pic_center]

function Person() {
        
    
    }
    console.log(Person === Person.prototype.constructor); // true

*  原型也是一个特殊的对象，也有`__proto__`属性，默认指向`Object.prototype`。

![在这里插入图片描述][2020112814400016.png_pic_center]

*  我们访问对象的属性跟方法先去对象中找，找不到就去对应的原型上找，原型找不到再去父原型上面找，直到顶级原型`Object.prototype`。JS中是通过原型链来达到继承的效果。
    
        function Person() {
              
        
        }
        
        var person = new Person();
        
        Object.prototype.name = "seven";
        
        console.log(person.name) // seven

### 9. BOM ###

浏览器对象模型 (**B**rowser **O**bject **M**odel） 使 JavaScript 有能力与浏览器"对话"。

#### 9.1 window ####

window 对象是BOM中所有对象的核心，除了是BOM中所有对象的父对象外，还包含一些窗口控制函数。

所有浏览器都支持 window 对象。它表示浏览器窗口。其它的BOM对象都是window对象的子对象。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

// 定义的全局变量都默认是window属性
    var a = "hello";
    // 定义的全局函数都默认是window函数
    function study(){
        
        console.log("好好学习，天天向上。");
    }
    
    // window可省略
    console.log(a); //　hello 
    console.log(window.a);//　hello 
    window.study();

*  #### 窗口尺寸 ####
    
     *  `innerHeight`：浏览器窗口的内部高度。
     *  `innerWidth`：浏览器窗口的内部宽度。
     *  `outerHeight`：浏览器窗口外部高度。
     *  `outerWidth`：浏览器窗口外部宽度。
        
            console.log(window.innerHeight); 
            console.log(window.innerWidth); 
            
            console.log(window.outerHeight); 
            console.log(window.outerWidth);
 *  #### 系统对话框 ####
    
     *  `alert()`确定提示框，只有一个确定按钮。
     *  `confirm()`：选择提示框，有确认跟取消按钮
     *  `prompt()`：输入提示框，可以输入值,有确认跟取消按钮。
        
            // 只有一个确定按钮
            alert("我很帅");
            
            // 有确认跟取消按钮
            var result = confirm("我是不是很帅");
            console.log(result); // 　true/false
            
            // 可以输入值,有确认跟取消按钮
            var time = prompt("你今天学习了几个小时？",3);// 输入值默认初始值设置为3
            console.log(time); // 　输入的值,点击取消结果为null
 *  #### 定时器 ####
    
    window 对象包含 4 个定时器专用方法，说明如下表所示，使用它们可以实现代码定时执行，或者延迟执行，使用定时器可以设计演示动画。
    
    <table> 
     <thead> 
      <tr> 
       <th align="center"><strong>方法</strong></th> 
       <th align="center"><strong>说明</strong></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="center">setInterval()</td> 
       <td align="center">按照执行的周期（单位为毫秒）调用函数或计算表达式</td> 
      </tr> 
      <tr> 
       <td align="center">setTimeout()</td> 
       <td align="center">在指定的毫秒数后调用函数或计算表达式</td> 
      </tr> 
      <tr> 
       <td align="center">clearInterval()</td> 
       <td align="center">取消由 setInterval() 方法生成的定时器</td> 
      </tr> 
      <tr> 
       <td align="center">clearTimeout()</td> 
       <td align="center">取消由 setTimeout() 方法生成的定时器</td> 
      </tr> 
     </tbody> 
    </table>
    
        var i = 0 ;
        function printNowTime(){
              
            i++;
            console.log(new Date().toLocaleString());
        
            if(i>=3){
              
                // 清除这个定时器
                clearInterval(timer);
            }
        
        }
        
        // 每1000毫秒执行一次,一直执行
        var timer = setInterval(printNowTime,1000);
    
        var i = 0 ;
        function printNowTime(){
              
            i++;
            console.log(new Date().toLocaleString());
        
        
            // 递归,让一次性定时器一直执行.
            var timer = setTimeout(printNowTime,1000);
        
            if(i>=3){
              
                // 清除这个定时器
                clearTimeout(timer);
            }			
        			
        }
        
        printNowTime();
 *  #### 窗口移动 ####
    
     *  `moveBy()`：可相对窗口的当前坐标把它移动指定的像素。
     *  `moveTo()`：把窗口的左上角移动到一个指定的坐标。
    
    由于安全性的考虑，Chrome等游览器把这个功能屏蔽了。
    
        // 下面案例仅IE有效
        
        // 每秒运行一次
        window.onload = function () {
              
            timer = window.setInterval("jump()", 1000);
        }
        
        function jump () {
              
            // 把窗口大小改为200*200像素
            window.resizeTo (200, 200);
            // 随机一个X轴跟Y轴坐标
            x = Math.ceil (Math.random() * 1024);
            y = Math.ceil (Math.random() * 760);
            // 移动到这个位置
            window.moveTo(x, y);
        }
 *  #### 打开窗口 ####
    
    使用 window 对象的 open() 方法可以打开一个新窗口。
    
    `window.open (URL, name, features, replace)`
    
    参数列表如下：
    
     *  `URL`：可选字符串，声明在新窗口中显示网页文档的 URL。如果省略，或者为空，则新窗口就不会显示任何文档。
     *  `name`：可选字符串，声明新窗口的名称。
     *  `features`：可选字符串，声明了新窗口要显示的标准浏览器的特征，具体说明如下表所示。如果省略该参数，新窗口将具有所有标准特征。
     *  `replace`：可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。
    
        var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no,    scrollbars=no,resizable=no, location=no, status=no";  //设置新窗口的特性
        var win = window.open("http://www.bailiban.com", "windowName", featrues);
        setTimeout (function () {
                //定时器
            if (win.closed) {
              
                console.log("创建的窗口已经关闭。");
            } else {
              
                win.close();
            }
        }, 5000);  //半秒钟之后关闭该窗口
        
        //打开一个新的窗口
        var win = window.open("http://www.bailiban.com");
        
        setTimeout (function () {
                //定时器
            win.close();
        }, 5000);  //半秒钟之后关闭该窗口

#### 9.2 document ####

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

*  对象属性
    
        //document.cookie = "name='zhangsan'";
        
        //设置或返回与当前文档有关的所有 cookie。
        console.log(document.cookie);
        //返回当前文档的域名。
        console.log(document.domain);
        //返回文档被最后修改的日期和时间。
        console.log(document.lastModified);
        //返回载入当前文档的文档的 URL。
        console.log(document.referrer);
        //返回当前文档的标题。
        console.log(document.title);
        //返回当前文档的 URL。
        console.log(document.URL);
 *  文档写入
    
     *  `open()`打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
     *  `write()`向文档写 HTML 表达式 或 JavaScript 代码。
     *  `writeln()`等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
    
        <html>
        <head>
        	<script>
        		function docWrite(){
               
                    // 重写打开一个一个新的流
        			var newDoc=document.open();
        			var txt="Learning about the DOM is FUN!";
                    // 往新的流中写入内容
        			newDoc.writeln(txt);
                    // 往新的流中写入内容
        			newDoc.write(txt);
                    // 关闭流
        			newDoc.close(); 
        		}		
        	</script>	 
        </head>
        <body>
        
        <input type="button" value="Write to a new document"
        onclick="docWrite()">
        
        </body>
        </html>
 *  文档操作见DOM

#### 9.3 location ####

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

这种方法既可以用于具有onclick事件的标签，也可以用于满足某些条件进行跳转，特点是方便且灵活。

*  对象属性
    
        //    http://127.0.0.1:8848/aaaa/b.html?name=zhangsan
        
        //设置或返回主机名和当前 URL 的端口号。
        console.log(location.host);  // 127.0.0.1:8848
        //设置或返回当前 URL 的协议。
        console.log(location.protocol);//http:
        //设置或返回当前 URL 的主机名。
        console.log(location.hostname);//127.0.0.1
        //设置或返回当前 URL 的端口号。
        console.log(location.port);//8848
        
        //设置或返回完整的 URL。
        console.log(location.href);//http://127.0.0.1:8848/aaaa/b.html?name=zhangsan
        //设置或返回当前 URL 的路径部分。
        console.log(location.pathname);///aaaa/b.html
        
        //设置或返回从问号 (?) 开始的 URL（查询部分）。
        console.log(location.search);//?name=zhangsan
        
        //可以通过location.href来设置页面的跳转
        location.href = "http://www.bailiban.com";
 *  地址操作
    
     *  `location.assign("http://www.bailiban.com")`打开新的页面，会在History 对象中生成一个新的记录。
     *  `location.replace("http://www.bailiban.com")`打开新的页面，不会在 History 对象中生成一个新的记录。
     *  `location.reload()`刷新当前页面内容

### 10. DOM ###

浏览器对象模型 (**D**ocument **O**bject **M**odel） 使 JavaScript 有能力与当前文档对话。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 1]

任意的文档都可以绘制成树状结构，在DOM树上，每个元素都可与看做一个对象，每个对象都叫做一个节点(node)。docunment就是一个对象，这个对象指代的是这个文档。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

节点类型主要分为4类（不考虑注释）：

*  document
 *  element
 *  attribute
 *  text

#### 10.1 document节点 ####

*  属性
    
     *  `nodeName`
        
        document的nodeName属性为\#document。
     *  `nodeType`
        
        document的nodeName属性为9。
     *  `nodeValue`
        
        document的nodeValue属性为null。
 *  方法
    
     *  `getElementById`
        
        返回带有指定 ID 的元素，结果为dom对象。
        
            // 获取ID值为my_h1的元素，结果为dom对象
            var h1 = document.getElementById("my_h1");
     *  `getElementsByTagName`
        
        返回带有指定标签名的所有元素。结果为dom对象数组。
        
            // 返回所有标签名为tagname的元素结合。
            document.getElementsByTagName("tagname");
     *  `getElementsByClassName`
        
        返回带有相同类名的所有元素。结果为dom对象数组。
        
            // 返回所有class属性值为intro的元素结合。
            document.getElementsByClassName("intro");
     *  `getElementsByName`
        
        可返回带有指定名称的对象的集合。结果为dom对象数组。
        
            // 返回所有name属性为my_input的元素集合。
            document.getElementsByName("my_input");
     *  `querySelector`
        
        可返回文档中匹配指定 CSS 选择器的一个元素。结果为第一个匹配的dom对象。
        
            var h1 = document.querySelector("#my_h1");
     *  `querySelectorAll`
        
        可返回文档中匹配指定 CSS 选择器的所有元素的集合。
        
            var li = document.querySelectorAll("li");
     *  `createElement`
        
        创建一个元素节点 。
     *  `createAttribute`
        
        创建一个属性节点。
     *  `createTextNode`
        
        创建一个文本节点。
        
            // 通过document创建一个h1元素节点
            var newH1 = document.createElement("h1");
            // 通过document创建一个h1元素节点
            var att1 =  document.createAttribute("class");
            att1.value = "my_class" ;
            // 通过document创建一个h1元素节点
            var text2 = document.createTextNode("我们正在学习JS的DOM.");
            // 把属性节点设置到对应的元素节点上
            newH1.setAttributeNode(att1);
            // 把文本节点设置到对应的元素节点上
            newH1.appendChild(text2);
            
            // 将创建的h1加入到body中
            document.body.appendChild(newH1);

#### 10.2 element节点 ####

*  方法
    
     *  `getElementsByTagName`
        
        返回带有指定标签名的所有元素。结果为dom对象数组。
        
            var span = document.getElementById("span");
            //通过元素标签span获取内部元素标签
            var h1 = span.getElementsByTagName("h1");
            console.log(h1[0].innerText);
     *  `appendChild`
        
        向元素添加新的子节点，作为最后一个子节点。
        
            var newH1 = document.createElement("h1"); 
            
            // 将创建的h1加入到body中
            document.body.appendChild(newH1);
     *  `removeChild`
        
        从元素中移除子节点。
        
            var span = document.getElementById("span");
            var h1 = span.getElementsByTagName("h1")[0];
            // 把第一个h1标签从span父容器中删除			 
            span.removeChild(h1);
     *  `remove`
        
        直接把当前元素删除。
        
            var h1 = document.getElementsByTagName("h1")[0];
            // 把当前的h1元素直接删除			 
            h1.remove();
     *  `replaceChild`
        
        用新节点替换某个子节点。
        
            var span = document.getElementById("span");
            var h1 = document.getElementsByTagName("h1")[0];
            // 创建新的节点
            var newNode = document.createTextNode("a");
            newNode.innerText = "bailiban" ;
            // 用新的节点替换旧的节点
            span.replaceChild(newNode,h1);
     *  `setAttribute / getAttribute`
        
        设置/获取元素的属性值。
        
            var input = document.getElementById("userPassword");
            // 设置输入框的type属性值为text
            input.setAttribute("type","text");
     *  `setAttributeNode / getAttributeNode`
        
        设置/返回指定的属性节点。
        
            var span = document.getElementById("span");
            // 通过document创建一个class属性节点
            var att1 =  document.createAttribute("class");
            // 设置此属性节点的值为my_class
            att1.value = "my_class" ;
            // 将此属性节点设置到对应的元素上
            span.setAttributeNode(att1);
            // 获取span的class属性节点,打印此属性值
            console.log(span.getAttributeNode("class").value);
     *  `insertBefore`
        
        在指定的已有子节点之前插入新的子节点。新节点参数在前，已存在节点参数在后。
        
            // 创建新的节点h2
            var newNode = document.createElement("h2"); 
            newNode.innerText = "bailiban";
            // 获取已存在的id值为my_p的节点
            var exsitNode = document.getElementById("my_p");
            // 在body元素中，将新的节点插入到已存在的p之前。
            document.body.insertBefore(newNode,exsitNode);
     *  `cloneNode`
        
        创建节点的拷贝，并返回该副本。参数为boolean类型，默认false，表示只克隆节点跟属性。true表示复制节点跟属性以及后代。
        
            var exsitNode = document.getElementsByTagName("h1")[0];
            //将已存在的h1标签进行克隆，后代也一起克隆过来
            var newNode = exsitNode.cloneNode(true);
            // 将克隆的新的节点插入到body中。			
            document.body.insertBefore(newNode,exsitNode);
 *  属性
    
     *  `nodeName`
        
        element的nodeName属性为标签名。
     *  `nodeType`
        
        element的nodeName属性为1。
     *  `nodeValue`
        
        element的nodeValue属性为null。
     *  `innerText`
        
        设置或返回元素的内部文本。
        
            var h1 = document.getElementsByTagName("h1")[0];
            // 设置h1标签的内部文本
            h1.innerText = "bailiban";
            // 获取h1标签的内部文本
            console.log(h1.innerText);
     *  `innerHTML`
        
        设置或返回元素的内部HTML。
        
            var h1 = document.getElementsByTagName("h1")[0];
            // 设置h1标签的内部html，html标签可以得到正确解析
            h1.innerHTML = "<em>bailiban</em>";
            // 获取h1标签的内部html
            console.log(h1.innerHTML);
     *  `outerHTML`
        
        设置或返回元素的外部HTML。
        
            var h1 = document.getElementsByTagName("h1")[0];
            // 获取h1标签的外部html
            console.log(h1.innerHTML);
            // 设置h1标签的外部html，html标签可以得到正确解析
            h1.outerHTML = "<em>bailiban</em>";
     *  `id / className / tagName`
        
        设置或返回元素的 id / class / 标签名。
        
            var h1 = document.getElementsByTagName("h1")[0];
            // 设置元素的id值
            h1.id = "h1_id";
            // 设置元素的class值
            h1.className = "h1_class";
            // 获取元素的id值
            console.log(h1.id);
            // 获取元素的class值
            console.log(h1.className);
            // 获取元素的标签值
            console.log(h1.tagName);
     *  `offsetHeight / offsetWidth`
        
        返回元素的高度/宽度。
        
            var h1 = document.getElementsByTagName("h1")[0];
            console.log(h1.offsetHeight);
            console.log(h1.offsetWidth);
     *  `offsetLeft / offsetTop`
        
        返回元素的水平/垂直偏移位置。
        
            var h1 = document.getElementsByTagName("h1")[0];
            console.log(h1.offsetLeft );
            console.log(h1.offsetTop);
    
        <h1>bailiban</h1>
        		 
        <ul id="ul">
            <li>苹果</li>
            <li>香蕉</li>
            <li>菠萝</li>
            <li>西瓜</li>
        </ul>
        
        <p>我们正在学习DOM。</p>
    
     *  `childNodes / children`
        
        返回节点的子节点集合，childNodes会把折叠的空白也算做一个子节点，而children不会。
        
            var ul = document.getElementById("ul");
            console.log(ul.childNodes[1].innerText);//苹果，因为前面的空白算第一个孩子
            console.log(ul.children[1].innerText);// 香蕉，不考虑空白
     *  `firstChild / firstElementChild`
        
        返回元素的第一个子元素。firstChild计算空白，而firstElementChild不会。
        
            var ul = document.getElementById("ul");
            console.log(ul.firstChild.innerText);//undefined，第一个孩子是空白，没有innerText
            console.log(ul.firstElementChild.innerText);//苹果，不考虑空白
     *  `lastChild / lastElementChild`
        
        返回元素的最后一个子元素。lastChild 计算空白，而lastElementChild不会。
        
            var ul = document.getElementById("ul");
            console.log(ul.lastChild.innerText);//undefined，最后一个孩子是空白，没有innerText
            console.log(ul.lastElementChild.innerText);//西瓜，不考虑空白
     *  `nextSibling / nextElementSibling`
        
        返回位于相同节点树层级的下一个节点。nextSibling计算空白，而nextElementSibling不会。
        
            var ul = document.getElementById("ul");
            console.log(ul.nextSibling.innerText);//undefined，下个节点是空白，没有innerText
            console.log(ul.nextElementSibling.innerText);//我们正在学习DOM。
     *  `previousSibling / previousElementSibling`
        
        返回位于相同节点树层级的上一个节点。previousSibling 计算空白，而previousElementSibling不会。
        
            var ul = document.getElementById("ul");
            //undefined，空白没有innerText
            console.log(ul.previousSibling.innerText);
            //bailiban
            console.log(ul.previousElementSibling.innerText);
     *  `parentNode`
        
        返回元素的父节点。
        
            var ul = document.getElementById("ul");
            console.log(ul.parentNode.tagName);// body

#### 10.3 CSS ####

*  内联样式
    
    我们可以通过元素.style.属性或者==元素.style\[“属性”\]==来获取或者设置元素的内联样式。如果属性是多个单词需要使用驼峰命名。
    
        var p = document.getElementById("my_p");
        // 获取元素P的内联样式的宽度
        console.log(p.style['width']);
        // 获取元素p的内联样式的字体大小，fontSize采用驼峰命名
        console.log(p.style.fontSize);
        // 设置元素p的宽度
        p.style.width = "200px" ;
    
     *  我们获取样式的时候是字符串类型，并且带有px字样。如果想转成只有数字的number类型可以使用parseInt方法。
 *  生效样式
    
    很多样式我们是定义在内部或者外部，只查看内联样式没意义，我们可以查看元素的生效样式而不用管是定义在哪里。
    
     *  IE游览器： 元素. currentStyle.属性
        
            var p = document.getElementById("my_p");
            console.log(p.currentStyle.width);
            console.log(p.currentStyle.fontSize);
     *  非IE游览器：getComputedStyle
        
            var p = document.getElementById("my_p");
            
            console.log(   getComputedStyle(p)["width"]   );
            console.log(   getComputedStyle(p)["fontSize"]  );
 *  兼容样式
    
    由于IE跟非IE游览器的样式访问不太一样，我们可以自定义一个方法，来兼容所有游览器。
    
        /*
        ele:要查看样式的元素。
        styleName：要查看的样式名，字符串形式。
        */
        function getStyleValue(ele,styleName){
              
            return ele.currentStyle ? ele.currentStyle[styleName] : 		getComputedStyle(ele,null)[styleName];
        }
        					
        var p = document.getElementById("my_p");
        console.log(getStyleValue(p,"width"));
        console.log(getStyleValue(p,"fontSize"));

### 11. 事件 ###

有时候我们需要在达到某些条件的时候去执行 一段固定的JS代码。我们称之为事件。事件有3要素：事件源、绑定事件、事件执行程序。比如页面有一个提交按钮，当点击这个按钮后可以打开一个新的页面。这个按钮叫事件源，打开新的页面叫做事件执行程序，按钮需要跟事件执行程序绑定后，才能在点击的时候触发执行逻辑。

#### 11.1常用事件句柄 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 2]

#### 11.2 事件的绑定 ####

> 方式一，直接在HTML中定义元素事件的相关属性

<button onclick="alert('hello')">按钮</button>
    		
    <button onclick="helloClk()">按钮</button>
    
    <script>
        function helloClk(){
         
            alert('hello');
        }
    </script>

缺点：html中写JS代码，强耦合，违反了“内容与行为相分离”的原则，少用。

> 方式二，直接在JS中定义元素事件的相关属性

//<button id="btn_id1">按钮</button>
    
    // 获取按钮元素
    var btn = document.getElementById("btn_id1");
    // 给按钮元素绑定事件句柄函数
    btn.onclick = helloClk;
    // 定义事件驱动函数
    function helloClk(){
        
        alert('hello');
    }

解决了强耦合性，但只能给一个事件对象绑定一个事件类型。 绑定多个同一类型的事件的话后面覆盖前面的。

> 方式三，高级事件处理方式 (addEventListener)

// 获取按钮元素
    var btn = document.getElementById("btn_id1");
    
    // 给按钮元素绑定事件句柄函数,可以绑定多个
    btn.addEventListener("click",btnClick1);
    // false表示事件冒泡阶段执行，true表示事件捕获阶段执行，默认false
    btn.addEventListener("click",btnClick2 ,false);
    
    function btnClick1(){
        
        alert('hello1');
    }
    
    function btnClick2(){
        
        alert('hello2');
    }
    
    // 把btn上的click事件的btnClick1解除绑定
    btn.removeEventListener("click",btnClick1);

*  可以为一个元素绑定多个监听函数，都会得到执行。
 *  匿名事件无法解绑。
 *  IE使用的是detachEvent / attachEvent

#### 11.3 表单的校验 ####

对于JAVA工程师来说，前端与后台的数据交互是及其重要的，而表单的提交就是前端与后台的重要的数据交互。为了提交表单时数据更加合理，减轻后台的压力，在提交表单时进行校验是非常有必要的。

需求：一个具有用户名跟密码的表单，用户名跟密码长度不低于6位则提交，否则不提交并给出提示。

> Step 1

在表单中绑定onsubmit事件，调用校验的函数，通过boolean结果来控制是否需要提交。

<form id="my_form" action="#" method="post" onsubmit="return check()"   >
        用户名： <input id="user_name" name="userName"  /> <br/>
        密 码： <input id="user_pwd" type="password" name="userPwd" /> <br/>
        <input type="submit"  />
    </form>
    
    <script>
        function check(){
         
            var name = document.getElementById("user_name").value;
            var pwd = document.getElementById("user_pwd").value;
            if(name.length < 6){
         
                alert("用户名长度必须不低于6位");
                return false ;
            }
            if(pwd.length < 6){
         
                alert("密码长度必须不低于6位");
                return false ;
            }
            return true;
        }
    </script>

> Step 2

这种方式可以进行表单校验，但是密码具有私密性，这种方式密码可以直接看到，我们可以进一步优化，在提交数据之前对密码进行MD5加密。

md5在线CDN：

https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.9.0/js/md5.js

https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.9.0/js/md5.min.js

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.9.0/js/md5.min.js"></script>

> Step 3

虽然这样可以对密码进行加密，但是提交的时候密码框的长度会变长，给用户的体验并不好，我们还可以进一步优化，使用隐藏域来提交密码。

终极方案：

#### 11.4 事件冒泡 ####

*  事件的传播
    
    JS中的事件创建后，会按照如下过程在HTML元素间进行传播。IE的事件模型是没有捕获阶段的。
    
     *  第一阶段：事件捕获，事件对对象沿DOM树向下传播
     *  第二阶段：目标出发，运行事件监听函数
     *  第三阶段：事件冒泡，事件沿DOM树向上传播  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 3]

<div id="my_div">
        <button id="btn_id1">按钮</button>
    </div>
    		
    <script>
        // 获取按钮元素
        var btn = document.getElementById("btn_id1");
        var div = document.getElementById("my_div");
    
        // 给按钮元素绑定btnClick1,在冒泡阶段 
        btn.addEventListener("click",btnClick1,false);
        // 给按钮元素绑定btnClick1,在冒泡阶段 
        div.addEventListener("click",btnClick2,false);
        // 给按钮元素绑定btnClick1,在捕获阶段 
        document.body.addEventListener("click",btnClick3,true);
    
        function btnClick1(){
         
            alert('btn click1');
        }
    
        function btnClick2(){
         
            alert('div click2');
        }
    
        function btnClick3(){
         
            alert('body click3');
        } 
    
    </script>

结果

body click3
    div  click2
    btn  click1

#### 11.5 event对象 ####

事件处理函数中有一个绑定事件的对象，有时候我们需要用到里面的一些重要属性。

*  `target`
    
    返回触发此事件的元素（事件的目标节点）。
    
        event.target.id;// 返回触发事件的元素的ID
        event.target.nodeName;// 返回触发事件的元素的标签名
 *  `type`
    
    返回事件的类型。
    
        event.type; // click
 *  `clintX / clintY`
    
    返回当事件被触发时，鼠标指针的水平 / 垂直坐标。
 *  `offsetX / offsetY`
    
    返回当事件被触发时，鼠标指针相对于事件源的水平 / 垂直坐标。
 *  `keyCode`
    
    对于按键事件，返回按键的代码。
 *  `preventDefault`
    
    取消事件的默认动作（如果存在这样的动作）。比如超链接、表单。
    
        <a id="my_a" href="https://www.bailiban.com">bailiban</a>
        <script>			
            var a = document.getElementById("my_a");
            a.onclick = function(e){
               
                e.preventDefault();
            }
        </script>
 *  `stopPropagation()`
    
    阻止事件的继续传播。
    
        <div id="my_div">
            <button id="btn_id1">按钮</button>
        </div>
        		
        <script>
            // 获取按钮元素
            var btn = document.getElementById("btn_id1");
            var div = document.getElementById("my_div");
        
            // 给按钮元素绑定btnClick1,在冒泡阶段 
            btn.addEventListener("click",btnClick1,false);
            // 给按钮元素绑定btnClick1,在冒泡阶段 
            div.addEventListener("click",btnClick2,false);
            // 给按钮元素绑定btnClick1,在捕获阶段 
            document.body.addEventListener("click",btnClick3,true);
        
            function btnClick1(e){
               
                alert('btn click1');
            }
        
            function btnClick2(e){
               
                alert('div click2');
            }
        
            function btnClick3(e){
               
                alert('body click3');
                // 阻止事件的进一步传播，不会传播到div跟btn
                e.stopPropagation();
            } 
        
        </script>
 *  `cancelable`
    
    指示事件是否可拥可取消的默认动作。设置成true表示阻止事件的传播，等同`stopPropagation()`

#### 11.6 事件的委托/代理 ####

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

需求：给ul下的每一个li绑定事件。

> 传统方式

循环给li元素绑定事件。

for(var item of li){
        
        item.onclick = function(){
        
            alert(this.innerText);
        }
    }

这种方式需要绑定很多事件，进行比较多次数的dom交互，影响性能。

> 事件委托

利用事件的传播机制，直接绑定在ul元素上。

ul.onclick = function(event){
        
        if(event.target.nodeName.toLowerCase() == 'li'){
        
            alert(event.target.innerText);
        }
    }

[20201128143611765.png]: /images/20221120/cdebf7ec86264d8f993ef596215cf13c.png
[20201128143731410.png_pic_center]: https://img-blog.csdnimg.cn/20201128143731410.png#pic_center
[20201128143738825.png_pic_center]: https://img-blog.csdnimg.cn/20201128143738825.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201128143755939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw==,size_16,color_FFFFFF,t_70#pic_center
[20201128143917932.png_pic_center]: https://img-blog.csdnimg.cn/20201128143917932.png#pic_center
[20201128143942246.png_pic_center]: https://img-blog.csdnimg.cn/20201128143942246.png#pic_center
[2020112814384133.png_pic_center]: https://img-blog.csdnimg.cn/2020112814384133.png#pic_center
[2020112814400016.png_pic_center]: https://img-blog.csdnimg.cn/2020112814400016.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201128144024611.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201128144120448.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201128144150287.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw==,size_16,color_FFFFFF,t_70#pic_center