返回顶部
扶摇直上九万里，展翅高飞岂可待。

js

1什么是js

1JS起源

js.png

Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等,JS有 如下特点

  • 脚本语言

    • JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

  • 基于对象

    • JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。

  • 弱类型

    • JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

  • 事件驱动

    • JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

  • 跨平台性

    • JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

2 JS 组成部分

js核心.png

ECMA

  • ECMA-262第11版，也成为ES11、ES2020，发布于2020年6月。这次修订增加了String 的 matchAll 方法、动态导入语句 import()、import.meta、export * as ns from 'module'、Promise.allSettled、GlobalThis、Nullish coalescing Operator、Optional Chaining以及一种新的数据类型BigInt，在此之后JavaScript正式迎来第8位数据类型。

BOM编程

  • BOM是Browser Object Model的简写，即浏览器对象模型。

  • BOM有一系列对象组成，是访问、控制、修改浏览器的属性和方法

  • BOM没有统一的标准(每种客户端都可以自定标准)。

  • BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程

  • BOM编程的对象结构如下

    • window 顶级对象,代表整个浏览器窗口
      • location对象 window对象的属性之一,代表浏览器的地址栏
      • history对象 window对象的属性之一,代表浏览器的访问历史
      • screen对象 window对象的属性之一,代表屏幕
      • navigator对象 window对象的属性之一,代表浏览器软件本身
      • document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档
    1681267483366

DOM编程

  • 简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
  • document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
  • 根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。

document1.png

  • 上面的代码生成的树如下

document2.png

  • DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程

3 JS的引入方式

内部脚本方式引入

  • 说明

    • 在页面中,通过一对script标签引入JS代码
    • script代码放置位置具备一定的随意性,一般放在head标签中居多

  • 代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小标题</title>
        <style>
            /* 通过选择器确定样式的作用范围 */
            .btn1 {
                display: block;
                width: 150px; 
                height: 40px; 
                background-color: rgb(245, 241, 129); 
                color: rgb(238, 31, 31);
                border: 3px solid rgb(238, 23, 66);
                font-size: 22px;
                font-family: '隶书';
                line-height: 30px;
                border-radius: 5px;
            }
        </style>
        <script>
            function suprise(){
                alert("Hello,我是惊喜")
            }
        </script>
    </head>
    <body>
        <button class="btn1" onclick="suprise()">点我有惊喜</button>
    </body>
</html>
  • 效果

js01.gif

外部脚本方式引入

  • 说明
    • 内部脚本仅能在当前页面上使用,代码复用度不高
    • 可以将脚本放在独立的js文件中,通过script标签引入外部脚本文件
    • 一对script标签要么用于定义内部脚本,要么用于引入外部js文件,不能混用
    • 一个html文档中,可以有多个script标签
  • 抽取脚本代码到独立的js文件中
1681270974917
  • 在html文件中,通过script标签引入外部脚本文件
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小标题</title>
        <style>
            /* 通过选择器确定样式的作用范围 */
            .btn1 {
                display: block;
                width: 150px; 
                height: 40px; 
                background-color: rgb(245, 241, 129); 
                color: rgb(238, 31, 31);
                border: 3px solid rgb(238, 23, 66);
                font-size: 22px;
                font-family: '隶书';
                line-height: 30px;
                border-radius: 5px;
            }
        </style>
        <script src="js/button.js" type="text/javascript"></script>
    </head>

    <body>
        <button class="btn1" onclick="suprise()">点我有惊喜</button>
    </body>
</html>

2 JS的数据类型和运算符

1 JS的数据类型

数值类型

  • 数值类型统一为 number,不区分整数和浮点数

字符串类型

  • 字符串类型为 string 和JAVA中的String相似,JS中不严格区分单双引号,都可以用于表示字符串

布尔类型

  • 布尔类型为boolean 和Java中的boolean相似,但是在JS的if语句中,非空字符串会被转换为'真',非零数字也会被认为是'真'

引用数据类型

  • 引用数据类型对象是Object类型, 各种对象和数组在JS中都是Object类型

function类型

  • JS中的各种函数属于function数据类型

命名未赋值

  • js为弱类型语言,统一使用 var 声明对象和变量,在赋值时才确定真正的数据类型,变量如果只声明没有赋值的话,数据类型为undefined

赋予NULL值

  • 在JS中,如果给一个变量赋值为null,其数据类型是Object, 可以通过typeof关键字判断数据类型

2 JS的变量

JS中的变量具有如下特征

  • 1 弱类型变量,可以统一声明成var

  • 2 var声明的变量可以再次声明

  • 3 变量可以使用不同的数据类型多次赋值

  • 4 JS的语句可以以; 结尾,也可以不用;结尾

  • 5 变量标识符严格区分大小写

  • 6 标识符的命名规则参照JAVA

  • 7 如果使用了 一个没有声明的变量,那么运行时会报

    uncaught ReferenceError: *** is not defined   at index.html:行号:列号

  • 8 如果一个变量只声明,没赋值,那么值是undefined

3 JS的运算符

算数运算符 + - * / %

  • 其中需要注意的是 / 和 %
    • / 在除0时,结果是Infinity ,而不是报错
    • %在模0时,结果是NaN,意思为 not a number ,而不是报错

复合算数运算符 ++ -- += -= *= /= %=

  • 符合算数运算符基本和JAVA一致,同样需要注意 /=和%=
    • 在/=0时,结果是Infinity ,而不是报错
    • 在%=0时,结果是NaN,意思为 not a number ,而不是报错

关系运算符 > < >= <= == === !=

  • 需要注意的是 == 和 === 差别
    • == 符号,如果两端的数据类型不一致,会尝试将两端的数据转换成number,再对比number大小
      • '123' 这种字符串可以转换成数字
      • true会被转换成1 false会被转换成0
    • === 符号,如果两端数据类型不一致,直接返回false,数据类型一致在比较是否相同

逻辑运算符 || &&

  • 几乎和JAVA中的一样,需要注意的是,这里直接就是短路的逻辑运算符,单个的 | 和 & 以及 ^ 是位运算符

条件运算符 条件? 值1 : 值2

  • 几乎和JAVA中的一样

位运算符 | & ^ << >> >>>

  • 和 java中的类似(了解)

3 JS的流程控制和函数

1 JS分支结构

if结构

  • 这里的if结构几乎和JAVA中的一样,需要注意的是

    • if()中的非空字符串会被认为是true
    • if()中的非零数字会被认为是true

  • 代码

if('false'){// 非空字符串 if判断为true
    console.log(true)
}else{
    console.log(false)
}
if(''){// 长度为0字符串 if判断为false
    console.log(true)
}else{
    console.log(false)
}
if(1){// 非零数字 if判断为true
    console.log(true)
}else{
    console.log(false)
}
if(0){
    console.log(true)
}else{
    console.log(false)
}
  • 结果

ifelse.png

switch结构

  • 几乎和JAVA的语法一致

  • 代码

var monthStr=prompt("请输入月份","例如:10 ");
var month= Number.parseInt(monthStr)
switch(month){
    case 3:
    case 4:
    case 5:
        console.log("春季");
        break;
    case 6:
    case 7:
    case 8:
        console.log("夏季");
        break;
    case 9:
    case 10:
    case 11:
        console.log("秋季");
        break;
    case 1:
    case 2:
    case 12:
        console.log("冬季");
        break;
    default :
        console.log("月份有误")
}
  • 效果

Switch.gif

2 JS循环结构

while结构

  • 几乎和JAVA一致

  • 代码

/* 打印99 乘法表 */
var i = 1;
while(i <= 9){
    var j = 1;
    while(j <= i){
        document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
        j++;
    }
    document.write("<hr/>");
    i++;
}
  • 效果

99乘法表.png

for循环

  • 几乎和JAVA一致

  • 代码

/* 打印99 乘法表 */
for(  var i = 1;i <= 9; i++){
    for(var j = 1;j <= i;j++){
        document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
    }
    document.write("<hr/>");
}
  • 效果

for99.png

foreach循环

  • 迭代数组时,和java不一样

    • 括号中的临时变量表示的是元素的索引,不是元素的值,
    • ()中也不在使用: 分隔,而是使用 in 关键字

  • 代码

var cities =["北京","上海","深圳","武汉","西安","成都"]
document.write("<ul>")
for(var index in  cities){
    document.write("<li>"+cities[index]+"</li>")
}
document.write("</ul>")
  • 效果

foreach.png

4 JS函数声明

JS中的方法,多称为函数,函数的声明语法和JAVA中有较大区别

  • 函数说明
    • 函数没有权限控制符
    • 不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字
    • 参数列表中,无需数据类型
    • 调用函数时,实参和形参的个数可以不一致
    • 声明函数时需要用function关键字
    • J函数没有异常列表
  • 代码
/* 
语法1 
    function 函数名 (参数列表){函数体}
            */
function sum(a, b){
    return a+b;
}
var result =sum(10,20);
console.log(result)

/* 
语法2
    var 函数名 = function (参数列表){函数体}
            */
var add = function(a, b){
    return a+b;
}
var result = add(1,2);
console.log(result);
  • 调用测试

5 JS的对象和JSON

1 JS声明对象的语法

语法1 通过new Object()直接创建对象

  • 代码
var person =new Object();
// 给对象添加属性并赋值
person.name="张小明";
person.age=10;
person.foods=["苹果","橘子","香蕉","葡萄"];
// 给对象添加功能函数
person.eat= function (){
    console.log(this.age+"岁的"+this.name+"喜欢吃:")
    for(var i = 0;i<this.foods.length;i++){
        console.log(this.foods[i])
    } 
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();
  • 效果

js对象语法1.png

语法2 通过 {}形式创建对象

  • 语法为 var person =
  • 代码
var person ={
    "name":"张小明",
    "age":10,
    "foods":["苹果","香蕉","橘子","葡萄"],
    "eat":function (){
        console.log(this.age+"岁的"+this.name+"喜欢吃:")
        for(var i = 0;i<this.foods.length;i++){
            console.log(this.foods[i])
        } 
    }
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();
  • 效果

js对象语法1.png

2 JSON格式

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式,JSON 就是一种字符串格式,这种格式无论是在前端还是在后端,都可以很容易的转换成对象,所以常用于前后端数据传递

  • 说明

    • JSON的语法

      ​ var obj="{'属性名':'属性值','属性名':{'属性名':'属性值'},'属性名':['值1','值1','值3']}"

    • JSON字符串一般用于传递数据,所以字符串中的函数就显得没有意义,在此不做研究

    • 通过JSON.parse()方法可以将一个JSON串转换成对象

    • 通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串

  • 代码

/* 定义一个JSON串 */
var personStr ='{"name":"张小明","age":20,"girlFriend":{"name":"铁铃","age":23},"foods":["苹果","香蕉","橘子","葡萄"],"pets":[{"petName":"大黄","petType":"dog"},{"petName":"小花","petType":"cat"}]}'
console.log(personStr)
console.log(typeof personStr)
/* 将一个JSON串转换为对象 */
var person =JSON.parse(personStr);
console.log(person)
console.log(typeof person)
/* 获取对象属性值 */
console.log(person.name)
console.log(person.age)
console.log(person.girlFriend.name)
console.log(person.foods[1])
console.log(person.pets[1].petName)
console.log(person.pets[1].petType)

/* 定义一个对象 */
var person={
    'name':'张小明',
    'age':20,
    'girlFriend':{
        'name':'铁铃',
        'age':23
    },
    'foods':['苹果','香蕉','橘子','葡萄'],
    'pets':[
        {
            'petName':'大黄',
            'petType':'dog'
        },
        {
            'petName':'小花',
            'petType':'cat'
        }
    ]
}

/* 获取对象属性值 */
console.log(person.name)
console.log(person.age)
console.log(person.girlFriend.name)
console.log(person.foods[1])
console.log(person.pets[1].petName)
console.log(person.pets[1].petType)
/* 将对象转换成JSON字符串 */
var personStr =JSON.stringify(person)
console.log(personStr)
console.log(typeof personStr)
  • 前后端传递数据

json数据传递.png

3 JS常见对象

1 数组

创建数组的四种方式

  • new Array() 创建空数组
  • new Array(5) 创建数组时给定长度
  • new Array(ele1,ele2,ele3,... ... ,elen); 创建数组时指定元素值
  • [ele1,ele2,ele3,... ... ,elen]; 相当于第三种语法的简写

数组的常见API

  • 在JS中,数组属于Object类型,其长度是可以变化的,更像JAVA中的集合
方法 描述
concat() 连接两个或更多的数组，并返回结果。
copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries() 返回数组的可迭代对象。
every() 检测数值元素的每个元素是否都符合条件。
fill() 使用一个固定值来填充数组。
filter() 检测数值元素，并返回符合条件所有元素的数组。
find() 返回符合传入测试（函数）条件的数组元素。
findIndex() 返回符合传入测试（函数）条件的数组元素索引。
forEach() 数组每个元素都执行一次回调函数。
from() 通过给定的对象中创建一个数组。
includes() 判断一个数组是否包含一个指定的值。
indexOf() 搜索数组中的元素，并返回它所在的位置。
isArray() 判断对象是否为数组。
join() 把数组的所有元素放入一个字符串。
keys() 返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。
map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reduce() 将数组元素计算为一个值（从左到右）。
reduceRight() 将数组元素计算为一个值（从右到左）。
reverse() 反转数组的元素顺序。
shift() 删除并返回数组的第一个元素。
slice() 选取数组的一部分，并返回一个新数组。
some() 检测数组元素中是否有元素符合指定条件。
sort() 对数组的元素进行排序。
splice() 从数组中添加或删除元素。
toString() 把数组转换为字符串，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值。
Array.of() 将一组值转换为数组。
Array.at() 用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。
Array.flat() 创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
Array.flatMap() 使用映射函数映射每个元素，然后将结果压缩成一个新数组。

2 Boolean对象

boolean对象的方法比较简单

方法 描述
toString() 把布尔值转换为字符串，并返回结果。
valueOf() 返回 Boolean 对象的原始值。

3 Date对象

和JAVA中的Date类比较类似

方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear() 已废弃。 请使用 getFullYear() 方法代替。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setTime() setTime() 方法以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds() setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear() 已废弃。请使用 setFullYear() 方法代替。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 已废弃。请使用 toUTCString() 方法代替。
toISOString() 使用 ISO 标准返回字符串的日期格式。
toJSON() 以 JSON 数据格式返回日期字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toUTCString() 根据世界时，把 Date 对象转换为字符串。实例：var today = new Date(); var UTCstring = today.toUTCString();
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。

4 Math

和JAVA中的Math类比较类似

方法 描述
abs(x) 返回 x 的绝对值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 Ex 的指数。
floor(x) 对 x 进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y,z,...,n) 返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 四舍五入。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
tanh(x) 返回一个数的双曲正切函数值。
trunc(x) 将数字的小数部分去掉，只保留整数部分。

5 Number

Number中准备了一些基础的数据处理函数

方法 描述
isFinite 检测指定参数是否为无穷大。
isInteger 检测指定参数是否为整数。
isNaN 检测指定参数是否为 NaN。
isSafeInteger 检测指定参数是否为安全整数。
toExponential(x) 把对象的值转换为指数计数法。
toFixed(x) 把数字转换为字符串，结果的小数点后有指定位数的数字。
toLocaleString(locales, options) 返回数字在特定语言环境下的表示字符串。
toPrecision(x) 把数字格式化为指定的长度。
toString() 把数字转换为字符串，使用指定的基数。
valueOf() 返回一个 Number 对象的基本数字值。

6 String

和JAVA中的String类似

方法 描述
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接两个或更多字符串，并返回新的字符串。
endsWith() 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。
fromCharCode() 将 Unicode 编码转为字符。
indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
includes() 查找字符串中是否包含指定的子字符串。
lastIndexOf() 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match() 查找找到一个或多个正则表达式的匹配。
repeat() 复制字符串指定次数，并将它们连接在一起返回。
replace() 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
replaceAll() 在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。
search() 查找与正则表达式相匹配的值。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组。
startsWith() 查看字符串是否以指定的子字符串开头。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
trim() 去除字符串两边的空白。
toLocaleLowerCase() 根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase() 根据本地主机的语言环境把字符串转换为大写。
valueOf() 返回某个字符串对象的原始值。
toString() 返回一个字符串。

6 事件的绑定

1 什么是事件

HTML 事件可以是浏览器行为，也可以是用户行为。 当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生.JS的事件驱动指的就是行为触发代码运行的这种特点

2 常见事件

1 鼠标事件

属性 描述
onclick 当用户点击某个对象时调用的事件句柄。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown 鼠标按钮被按下。
onmouseenter 当鼠标指针移动到元素上时触发。
onmouseleave 当鼠标指针移出元素时触发
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmouseup 鼠标按键被松开。

2 键盘事件

属性 描述
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。

3 表单事件

属性 描述
onblur 元素失去焦点时触发
onchange 该事件在表单元素的内容改变时触发( , ,
posted @ 2025-04-10 02:51  朱啸毅  阅读(50)  评论(0)    收藏  举报