JavaScript 入门指南（一）简介及基础语法

r囧r小猫 2024-04-20 11:58 25阅读 0赞

## JavaScript 简介 ##

JavaScript，简称 js，是一种基于对象（object-based）和事件驱动（Event Driven）的简单的并具有安全性能的脚本语言。

**JavaScript 特性**

*  JavaScript 是解释性语言，而不是编译性语言；
    
    在支持 JavaScript 的浏览器中运行的过程中没有编译过程，而是逐行解释执行。
 *  JavaScript 是一种轻量级的脚本语言（script language）。
    
    不具备开发操作系统的能力，只能用来编写控制其他大型应用程序（比如浏览器）的脚本。
 *  Javascript 是一种嵌入式语言，本身不提供任何 I/O 相关的 API，主要通过调用宿主环境（host）的 API 来工作。
 *  JavaScript 是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。

**JavaScript 组成**

*  ECMAScript：JavaScript 的核心，语法格式，使用方法
 *  文档对象模型（DOM，document object model）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。
    
    DOM 将把整个页面规划成由节点层级构成的文档 document 对象 有 一个一个的元素（element）
 *  浏览器对象模型（BOM，browser object model）：对浏览器窗口进行访问和操作

**JavaScript 特点：**

*  **脚本语言**：脚本语言是一种简单的程序，是由一些 ASCII 字符构成，可以使用任何一种文本编辑器编写。
    
    一些程序语言（如 C、C++、Java 等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。
    
    脚本语言是指在 web 浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。
 *  **基于对象的语言**：非面向对象
    
    面向对象有三大特点（封装，继承，多态）缺一不可。
    
    通常"基于对象"是使用对象，但无法利用现有对象模板产生新的对象类型，也就是说"基于对象"没有继承的特点。
    
    注意：目前的 js 脚本已经支持创建自定义类，继承等
 *  **事件驱动**：在网页中执行了某种操作的动作，被称为"事件"(Event)
    
    比如按下鼠标、移动窗口、选择菜单等都可以视为事件。
    
    当事件发生后，可能会引起相应的事件响应。
 *  **简单性** ：变量类型是采用弱类型，并未使用严格的数据类型。
 *  **安全性**：JavaScript 不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
 *  **跨平台（系统）性**：JavaScript 依赖于浏览器本身，与操作平台无关。
    
    只要计算机安装了支持 JavaScript 的浏览器（装有JavaScript 解释器），JavaScript 程序就可以正确执行。

**缺点**：

*  部分浏览器兼容性不好！
    
    各种浏览器支持 JavaScript 的程度是不一样的，支持和不完全支持 JavaScript 的浏览器在浏览同一个带有 JavaScript 脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。

**JavaScript 的版本**

*  ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
    
    ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
    
    ES6 的语法：[传送门][Link 1]

## JavaScript 基础语法 ##

### js 在 html 中的引入方式 ###

JS 在 html 中两种引入方式：

*  方式1：**内嵌式（内部脚本）**：在 html 中创建一个 script 标签，在标签中写 js 代码
    
    格式：
    
        <script type="text/javascript">
            js代码;
        </script>
 *  方式2：**外联式（外部脚本）**：在 html 页面中使用 script 标签引入外部的 js 文件
    
    一个 js 文件可以被多个 html 页面同时引入
    
        <script type="text/javascript" src="外部js文件的路径"></script>

**注意：**

*  JavaScript 代码必须位于 `<script>` 与 `</script>` 标签之间
 *  一个 HTML 文档中可以出现多个 `<script>` 标签
 *  JavaScript 代码的出现次序就是 JavaScript 的执行顺序
 *  如果一个 script 标签引入了外部 js 文件，那么这个标签中就不能写 js 代码了，会失去作用
    
    如果想要再写 js 代码，需要重新创建一个 script 标签
 *  理论上 script 标签可以写在 html 页面中的任意位置，在不影响功能的前提下，尽量把 script 标签写在页面的下边，让浏览器先解析出页面，给用户展示，再执行 js 的代码（页面显示速度快）

示例：

*  主 js 文件
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>JS两种引入方式</title>
            
            <script type="text/javascript">
                //全局函数alert(数据);可以在页面中弹出一个对话框,输出指定的数据
                alert(1);
            </script>
            
            <script src="js/1.js"></script>
        </head>
        <body>
        </body>
        </html>
    
    1.js文件
    
        alert("你好");

### js 在 js 中的导出导入方式 ###

*  JavaScript 中，模块是一种可重用的代码块，它将一些代码打包成一个单独的单元，并且可以在其他代码中进行导入和使用。
    
    在导入模块时，JavaScript中有两种常用的方式：：import 和 require
    
     *  **import** ：是 ES6 引入的新特性，它允许以声明式的方式导入其他模块中的内容
     *  **require** ：是 Node.js 中的特性，它允许使用一个函数来加载和导入其他模块
 *  **import 和 require 的区别**：
    
     *  **导入方式**：
        
         *  `import` 导入的方式是使用关键字 `import` 加上大括号（如果需要导入的内容是命名导出的话），再加上模块名的方式进行导入。例如：
            
                import {
                          func1, func2 } from './myModule';
         *  `require` 导入的方式是使用 `require` 函数，将需要导入的模块路径作为参数传递给该函数。例如：
            
                const myModule = require('./myModule');
     *  **文件类型**：
        
         *  `import` 只能导入 ES6 模块或者使用 Babel 等工具转化为 ES6 模块的代码。
         *  `require` 则可以导入 CommonJS 模块、AMD 模块、UMD 模块以及 Node.js 内置模块等多种类型的模块。
     *  **变量提升**：
        
         *  在 ES6 中，`import` 语句是静态执行的，意味着它们在模块内部的顶层执行，并且在模块内部创建一个局部作用域。这意味着导入的变量只在模块内部可见，并且不会影响模块外部的变量。因此，使用 `import` 导入的变量是不会被提升的。
         *  `require` 函数是动态执行的，这意味着它在运行时执行，并且不会在模块内部创建一个局部作用域。因此，使用 `require` 导入的变量是可以被提升的。
        
        注：如何理解 import 语句是静态执行的和 require 函数是动态执行的？
        
         *  理解 `import` 语句是静态执行的和`require`函数是动态执行的，需要先了解这两个概念的含义。
            
             *  静态执行是指在编译阶段就能够确定其执行结果的代码执行方式。
                
                在 JavaScript 中，`import` 语句属于静态执行的代码，也就是说，当 JavaScript 引擎执行代码时，会在编译阶段对 `import` 语句进行静态分析，确定所导入的模块，并在运行时加载这些模块。
             *  动态执行是指在运行时才能确定其执行结果的代码执行方式。
                
                在 JavaScript 中，`require` 函数属于动态执行的代码，也就是说，当 JavaScript 引擎执行代码时，会在运行时动态地确定所需的模块，并加载这些模块。
         *  因此，可以理解为：
            
             *  `import` 语句是静态执行的，因为在编译阶段就能够确定所导入的模块，从而在运行时快速加载这些模块。
             *  `require` 函数是动态执行的，因为在运行时才能够确定所需的模块，需要动态地加载这些模块。
        
        **注意**：由于 `import` 语句是静态执行的，因此在代码中不能使用变量或表达式作为模块路径，只能使用字符串字面量。而 `require` 函数则可以接受变量或表达式作为模块路径，从而动态地确定所需的模块。
     *  **导出方式**：
        
         *  `import` 使用ES6的导出方式，可以使用命名导出和默认导出两种方式进行导出。例如：
            
                // 命名导出
                export function func1() {
                          }
                // 默认导出
                export default {
                          }
         *  而 `require` 使用 CommonJS 的导出方式，只能使用默认导出方式进行导出。例如：
            
                module.exports = {
                          };
            
            `require` 除了可以使用 `module.exports` 导出模块，还可以使用 `exports` 对象。
            
            实际上，`exports` 对象是 `module.exports` 的一个引用。
            
            当使用 `exports` 导出时，实际上是向 `module.exports` 对象添加属性和方法。
     *  **模块作用域**：
        
        在 JavaScript 中，每个模块都有自己的作用域，模块之间的变量是互相隔离的，不会相互干扰。这也是模块化编程的一个主要特点。
        
         *  在使用 `import` 导入模块时，实际上是在模块内部创建了一个指向被导入模块的引用，而不是直接复制模块中的变量。因此，当不同的文件中使用 `import` 导入相同的模块时，它们实际上是共享了同一个模块实例，所以可以访问和修改同一个模块中的变量。
         *  在使用 `require` 导入模块时，实际上是将导入模块中的变量直接复制到（可以理解为浅拷贝）当前模块的作用域中。因此，当不同的文件中使用 `require` 导入相同的模块时，它们实际上是拥有各自独立的模块实例，彼此之间不会共享模块中的变量。
        
        需要注意的是，如果使用 `require` 导入的模块中含有可变状态的对象，那么在不同文件中修改该对象的变量会相互影响。这也是 `require` 在某些情况下会产生一些难以预测的副作用的原因之一。而使用 `import` 导入的模块，由于是共享同一个模块实例，相对来说更容易管理和控制。
        
         *  如果使用 `require` 导入的模块中含有可变状态的对象，比如一个对象的属性值可以被修改，那么当在不同的文件中修改这个对象中变量时，由于 `require` 会将导入的模块中的变量直接复制到当前模块的作用域中（类似于浅拷贝，模块中的普通变量（例如字符串、数字等）是非共享的，而对象的变量则是能被修改共用的），因此会导致这个对象的变量在不同文件中的值相互影响。
         *  需要注意的是，这种影响是由于模块之间共享同一个对象的引用造成的，而不是模块本身的问题。因此，在编写模块时，需要谨慎地处理可变状态的对象，尽量避免在不同模块之间共享同一个对象的引用，以避免出现不可预测的副作用。
         *  举个例子，假设有一个 `config.js` 模块，其中定义了一个可变的对象 `config`，并且在 `main.js` 和 `app.js` 两个文件中使用了 `require` 导入该模块：
            
            config.js：
            
                let config = {
                          
                  env: 'dev',
                  port: 3000
                }
                module.exports = config;
            
            main.js：
            
                const config = require('./config.js');
                // 修改config对象的属性值
                config.port = 4000;
                console.log(`config.port in main.js: ${
                            config.port}`);
            
            app.js：
            
                const config = require('./config.js');
                console.log(`config.port in app.js: ${
                            config.port}`);
            
             *  当执行 `main.js` 和 `app.js` 时，它们都会通过 `require` 导入 `config.js` 模块，并且 `main.js` 中修改了 `config` 对象的 `port` 属性值。
             *  那么当 `app.js` 输出 `config.port` 时，它实际上输出的是被 `main.js` 修改后的 `port` 属性值，而不是 `config.js` 模块原本定义的值。
             *  这就是因为 `require` 导入的模块中含有可变状态的对象或变量，在不同文件中修改该对象或变量会相互影响的原因。

### js 的三种输出方式 ###

*  方式1：**把数据输出到浏览器的控制台**：console.log(“hello”);
    
    注：按 F12 调出控制台
 *  方式2：**输出到 html 页面的 body 中**：document.writeln(“200”);
 *  方式3：**浏览器弹出对话框输出**：alert(“你好”);

示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS三种输出方式</title>
    </head>
    <body>
        <script>
            //JS三种输出方式
            //1.把数据输出到浏览器的控制台
            console.log("hello");
            //2.输出到html页面的body中
            document.writeln("200");
            //3.浏览器弹出对话框输出
            alert("你好");
        </script>
    </body>
    </html>

### js 的变量 ###

*  **js 语言：弱类型语言**。给变量赋什么类型的值，那么这个变量就是什么类型
 *  **定义变量**
    
    在使用每种数据的时候，都可以使用关键字 **var**（es5 特性）或 **let**（es6 特性）来定义变量
    
     *  **var**：定义全局变量
        
         *  作用域在这个 script 标签中都有效（作用域大）
         *  可以先使用变量，再定义变量
        
            var 变量名; 		 	  // 变量没有赋值，有默认值undefined
            var 变量名a, 变量名b;		// 同时声明多个变量
            var 变量名 = 数据值;		// 定义变量的同时，给变量进行初始化赋值
     *  **let**：定义局部变量
        
         *  只在局部的位置（自己所在的块级）有效
            
            任何一对花括号 \{ \} 中的语句都属于一个块，在花括号里面用 let 定义的所有变量在花括号外都是不可见的，称之为块级作用域
         *  必须先定义后使用
        
            let 变量名; 	// 变量没有赋值，有默认值undefined
            let 变量名a, 变量名b;		// 同时声明多个变量
            let 变量名 = 数据值;
 *  **定义常量**
    
    在 js 中可以使用关键字 **const** 定义常量（常量的值是不能改变的）
    
        const 常量名 = 数据值;
 *  **常量和变量的命名**
    
     *  **以字母，下划线或者 $ 开头，并且以字母，下划线，$，数字组成**
     *  **不能使用 关键字 和 保留字**
        
            
            break/case/catch/continue/debugger/default/in/do/else/finally/for/function/if/try
            /instanceof/new/return/switch/this/throw/typeof/var/void/while/with/delete
            
            
            abstract/enum/int/short/boolean/export/interface/static/byte/extends/long/super/Char
            /final/native/synchronized/Class/float/package/throws/Const/goto/private/transient
            /debugger/implements/protected/volatile/double/import/public
     *  **字母的大小写敏感**

### js 的运算符 ###

*  **类型运算符**：
    
     *  **typeof**：返回变量的类型
     *  **instanceof**：返回对象是否对象类型的实例
 *  **算数运算符**：
    
     *  `+` ：加法。注意：字符串+数字 表现为拼接，而不是将字符串类型转换成数字相加
     *  `-` ：减法
     *  `*` ：乘法
     *  `/` ：除法
     *  `%` ：取模（余数）
     *  `++` ：递加
     *  `--` ：递减
 *  **赋值运算符**：
    
     *  `=` ：将等号左侧的值或变量值赋值给等号右侧的变量，示例：`x = y`
     *  `+=` ：先加再赋值左侧，示例：`x += y` 等价于 `x = x + y`
     *  `-=` ：先减再赋值左侧，示例：`x -= y` 等价于 `x = x - y`
     *  `*=` ：先乘再赋值左侧，示例：`x *= y` 等价于 `x = x * y`
     *  `/=` ：先除再赋值左侧，示例：`x /= y` 等价于 `x = x / y`
     *  `%=` ：先取模再赋值左侧，示例：`x %= y` 等价于 `x = x % y`
 *  **比较运算符**：
    
     *  `==` ：等于
     *  `===` ：等值等型
     *  `!=` ：不相等
     *  `!==` ：不等值或不等型
     *  `>` ：大于
     *  `<` ：小于
     *  `>=` ：大于或等于
     *  `<=` ：小于或等于
     *  `?` ：三元运算符
    
    **注意：**
    
     *  **== 和 === 的区别**
        
        等于判断（==）：先判断类型，类型一致则直接比较内容，如果类型不一致，转换为数字类型后再比较内容
        
        等值判断（===）：先判断类型，类型不一致则直接 false，类型一致则继续比较内容，内容一致则 true，不一致则 false
     *  **boolean 类型**
        
        参与计算或比较时，true 转换为 1，false 转换为 0
 *  **逻辑运算符**：
    
     *  `&&` ：逻辑与
     *  `||` ：逻辑或
     *  `!` ：逻辑非
 *  **条件运算符（三目运算符、双元运算符）**：
    
        // 语法：
        变量名 = (condition) ? value1 : value2
        // 示例：
        var a = (11 == 5) ? "b" : "c"

### js 的布尔运算规则 ###

可以使用一些非布尔类型的值，作为布尔值来使用

*  **boolean 类型**： true：真；false：假
 *  **undefined 类型**： 作为 false
 *  **null 类型**：作为 false
 *  **string 类型**： “”（空字符串）作为 false，非空的字符串作为 true
 *  **number 类型**： 0 或 0.0 作为 false 使用，非 0 的数字作为 true
 *  **object 类型**： 所有的对象都可以作为 true

### js 的流程控制语句 ###

#### 分支语句：if、switch ####

*  **if 语句：**
    
     *  **if** 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
     *  **if…else** 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
     *  **if…else if…else** 语句- 使用该语句来选择多个代码块之一来执行
 *  **switch 语句**：使用该语句来选择多个代码块之一来执行
    
    **格式：**
    
        var 变量n = 变量值;
        switch(变量n):
            case 值1:
            	逻辑代码
                break;
            case 值2:
                逻辑代码
                break;
            ...
            default:
                逻辑代码
                break;
    
    **代码解释：**
    
     *  计算一次 switch 表达式
     *  把表达式的值与每个 case 的值进行对比
     *  如果存在匹配，则执行关联代码
    
    **工作原理：**
    
    1.  首先设置表达式 n（通常是一个变量）
    2.  随后表达式的值会与结构中的每个 case 的值做比较
    3.  如果存在匹配，则与该 case 关联的代码块会被执行
    4.  请使用 break 来阻止代码自动地向下一个 case 运行
    
    **break 关键字的作用**
    
     *  如果 js 遇到 break 关键词，它会跳出 switch 代码块。即停止 switch 代码块中更多代码的执行以及 case 测试。
     *  如果找到匹配，并完成任务，则随即中断执行（break），无需更多测试。
     *  break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。
     *  switch 代码块中的最后一个 case 可以省略 break ，因为代码块在此处会自然结束，不必 break 来中断
    
    **default 关键字的使用**：使用 default 关键词来规定匹配不存在时做的事情

#### 循环语句：while、do-while、for、for-each ####

*  **while 循环**：
    
    如果条件为真的话，就会重复循环执行大括号包裹的代码块
    
    语法：
    
        while (条件){
              
        	代码块
        };
 *  **do-while 循环**：
    
    do-while 循环是 while 循环的变体。
    
    该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环
    
    语法：
    
        do {
              
        	需要执行的代码
        } while (条件);
 *  **for 循环**：
    
    语法：
    
        for (进入循环前执行的语句; 进入循环的条件; 每次循环后执行的语句){
                      
        	被执行的代码块        
        }
        
        // 示例
        var arr = [1,2,3,"a","b","c",true,false,1.1,2.2,3.3];
        for(var i=0; i<arr.length; i++){
              
            console.log(arr[i]);
        }
 *  **增强 for 循环**
    
     *  **for-in** 格式：获取的是数组的索引
        
            for(let i in 数组){
                    		  // 使用变量i接收数组的索引值。i是变量名，可自定义
            	let 变量名 = 数组[i]);	// 获取数组元素并赋值给变量
            }
            
            // 示例：
            var arr = [1, 2, 3];
            for(let i in arr){
                    
            	console.log(arr[i]);	// 打印数组元素
            }
     *  **for-of** 格式：获取的是数组中的元素
        
            for(let 变量名 of 数组){
                    
            	console.log(变量名);
            }
            
            // 示例：
            var arr = [1, 2, 3];
            for(let v in arr){
                    
            	console.log(v);
            }
    
    注：也可以用 var 定义变量，但是推荐使用 let，因为 var 定义的是全局变量，let 定义的是局部变量

#### 终止循环：break、continue、return ####

*  **break 语句**：立即跳出整个循环（即终止循环）
 *  **continue 语句**：立即跳出本次循环，然后开始循环的一次新迭代
 *  **return 语句**：用于终止函数的执行并指定函数返回的值。`return` 语句只能出现在**函数体内**
    
    在函数体内的循环中使用 return 语句，终止了整个函数的执行，当然也就终止了函数体内的循环

### js 的函数 ###

*  JavaScript 使用关键字 **function** 定义函数。
    
    函数可以通过声明定义，也可以是一个表达式（匿名函数）
 *  **声明定义函数**
    
    **定义格式：**
    
        function 函数名(参数列表){
              
            函数体;
            return 返回值;
        }
    
    **注意：**
    
     *  函数是没有返回值类型的，在函数中写 return 就有返回值，不写 return 没有返回值
     *  只写 return ，不写具体的返回值，则 return 的作用就是结束函数
     *  函数的参数列表，不能写数据类型，直接写变量名即可
        
            (var a, var b) 	// 错误  
            (a,b)			// 正确
    
    **使用格式：**
    
        // 有返回值的函数:
        var 变量 = 函数名(参数);
        // 没有返回值的函数：
        函数名(参数);
 *  **匿名函数**：没有名字的函数
    
    **定义格式**：
    
        function (参数列表){
              
            函数体;
            return 返回值;
        }
    
    **使用格式**：
    
     *  可以把匿名函数赋值给一个变量，变量名就相当于是函数的名字，通过变量名就可以调用函数
     *  在 js 中有一些函数的参数需要传递其他的函数，就可以使用匿名函数传递（例如：定时器）

### js 的事件 ###

#### 事件概述 ####

js 的事件是 js 不可或缺的组成部分。

几个概念：

*  **事件源**：被监听的 html 元素
 *  **事件**：某类动作，例如点击事件，移入移出事件，敲击键盘事件等
 *  **事件与事件源的绑定**：在事件源上注册上某事件
 *  **事件触发后的响应行为**：事件触发后需要执行的代码，一般使用函数进行封装

#### 常用的事件 ####

<table> 
 <thead> 
  <tr> 
   <th><strong>事件名</strong></th> 
   <th><strong>描述</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>onload</strong></td> 
   <td>某个页面或图像被完成加载</td> 
  </tr> 
  <tr> 
   <td><strong>onreset</strong></td> 
   <td>重置按钮被点击</td> 
  </tr> 
  <tr> 
   <td><strong>onsubmit</strong></td> 
   <td>提交按钮被点击（注意：事件源是表单 form）</td> 
  </tr> 
  <tr> 
   <td><strong>onchange</strong></td> 
   <td>用户改变域中内容</td> 
  </tr> 
  <tr> 
   <td><strong>onclick</strong></td> 
   <td>鼠标点击某个对象</td> 
  </tr> 
  <tr> 
   <td>ondblclick</td> 
   <td>鼠标双击某个对象</td> 
  </tr> 
  <tr> 
   <td><strong>onblur</strong></td> 
   <td>元素失去焦点</td> 
  </tr> 
  <tr> 
   <td><strong>onfocus</strong></td> 
   <td>元素获得焦点</td> 
  </tr> 
  <tr> 
   <td><strong>onchange</strong></td> 
   <td>用户改变域的内容</td> 
  </tr> 
  <tr> 
   <td><strong>onmouseover</strong></td> 
   <td>鼠标移入（鼠标被移到某元素之上）</td> 
  </tr> 
  <tr> 
   <td><strong>onmouseout</strong></td> 
   <td>鼠标移出（鼠标从某元素移开）</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>鼠标移动</td> 
  </tr> 
  <tr> 
   <td>onmousedown</td> 
   <td>某个鼠标按键被按下</td> 
  </tr> 
  <tr> 
   <td>onmouseup</td> 
   <td>某个鼠标按键被松开</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>某个键盘的键被按下</td> 
  </tr> 
  <tr> 
   <td>onkeypress</td> 
   <td>某个键盘的键被按下或按住</td> 
  </tr> 
  <tr> 
   <td>onkeyup</td> 
   <td>某个键盘的键被松开</td> 
  </tr> 
  <tr> 
   <td>onselect</td> 
   <td>文本被选定</td> 
  </tr> 
  <tr> 
   <td>onerror</td> 
   <td>当加载图像时发生错误</td> 
  </tr> 
 </tbody> 
</table>

#### 事件的基本使用 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js中的事件</title>
        <script>
            //定义按钮发生鼠标点击事件的响应函数
            function butOnclick() {
          
                //事件的处理逻辑
                alert("就点你咋地!");
            }
    
            //定义图片鼠标移入事件的响应函数
            function imgOnmouseover() {
          
                alert("鬼子又来抢花姑娘了!");
            }
    
            //定义文本框修改域内容事件的响应函数
            function textOnchange() {
          
                alert("haha");
            }
        </script>
    </head>
    <body>
        
        <input type="button" value="没事别点我" onclick="butOnclick()"/>
    
        
        <dev width="150px" height="200px" style="border-style:solid" onmouseover="imgOnmouseover()">
    	鼠标移入就弹窗
    	</dev>
    
        
        <input typeof="text" placeholder="请输入你想输入的内容" onchange="textOnchange()"/>
    </body>
    </html>

#### 页面加载事件（onload） ####

onload 事件会在页面或图像加载完成后立即发生。

onload 通常用于 `<body>` 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

**语法**（实际使用中，以下两种方式二选一）：

*  **在 HTML 中**：在 body 标签绑定事件 onload ，并指定响应函数
    
        <body onload="SomeJavaScriptCode()">
 *  **在 JavaScript 中**：
    
        window.onload=function(){
              *SomeJavaScriptCode*};

[Link 1]: https://www.runoob.com/w3cnote/es6-tutorial.html