JavaScript中的常用事件，以及内置对象详解

港控/mmm° 2023-02-23 08:47 14阅读 0赞

### 目录 ###

*   *   *  
     *  一、js输出
     *  二、js事件
     *  三、js对象
     *  最后

###  ###

今天是刘小爱自学Java的第81天。

感谢你的观看，谢谢你。

话不多说，开始今天的学习：

![format_png][]

学前端有一个非常权威的组织，也就是w3c，其有个专门的教程文档，特别的全面。

我研究了下其文档，发现竟然连Python的教程都有，Java倒是一直显示“即将上线”。

当然官方文档存在的最大意义在于遇到不懂的知识点了可以通过它找到对应的讲解。

至于学习最好还是跟着某些专业教程来，既能少走许多弯路，也能节省许多时间。

## 一、js输出 ##

这一块跟着文档学一学，对其有一定的了解，之后还是跟着教程走。

w3c网站将代码模板都给写好了，自己只需要做修改代码测试就可以了，十分方便。

**1.innerHTML**

![format_png 1][]

document有一个方法getElementById()，见名知意，该方法是根据id获取对应的元素。

id是demo，那么获取id为demo的内容，上图中也就是1024。

但是为何输出又是“刘小爱”了呢？

原来还有个innerHTML，这是一个属性，相当于给id为“demo”的元素重新赋值了。

其中还有一个属性叫innerText，这个是只能修改元素内部的纯文本。

**2.window.alert()**

![format_png 2][]

alert，警示的意思，也就是说调用alert方法，会弹出一个警示框来显示数据。

**3console.log()**

使用该方法可以将内容输出到浏览器控制台。

浏览器按F12即可打开浏览器控制台。

console，控制台的意思。

这个也就相当于IDEA中的控制台，只不过只是浏览器里面的，代码编写如下：

![format_png 3][]

此外，昨天还学了一个专门输出的语句document.writeln()，就不再赘述了。

其实js中的所有知识点都可以在文档中学习。

但我这边主要还是学Java，不可能花大量的时间去学js，只学一个大概。

以后遇到问题，查文档能看懂即可。

## 二、js事件 ##

事件是指浏览器或用户做的某些事情。

举几个例子：鼠标单击、双击某个按钮；键盘按着（不停地在输入）；键盘弹起（输入结束）…

事件有好多个，暂且只学常用的几个。

![format_png 4][]

**①单击事件（全名函数注册）**

onclick，即为单击的意思。

在input标签中有一个属性叫onclick，单击一下该按钮，会触发对应的事件。

也就是会调用onclick对应的那个函数，上图中就是click01函数。

所以点下按钮，click01函数执行，弹出警示框。

**注意**：函数名不能为click。

**②双击事件（匿名函数注册）**

ondblclick，它比onclick多一个dbl。dbl，double的简写，点两下单击，所以是双击。

这样记忆下来也就清晰好记多了。

其使用的是匿名注册，它的特点在于input标签中不用设置对应的函数名了。

而是用对应的id将该标签和匿名函数联系起来。

这样的好处在于**耦合度低**。

如果出了什么意外，只需要删除匿名函数即可，对input标签本身不用修改。

但是使用匿名函数也会有一个问题：

![format_png 5][]

一开始是将script标签放在了input标签下面，现在将其移动到head标签中做一个测试，会发现：

**单击事件能够触发，但是双击事件不能触发**。

为什么会这样呢？我个人的理解是：

全名函数是直接在input标签（也就是HTML中）触发的事件；而匿名函数是在js中触发的事件。

**这样匿名函数就会有一个执行顺序问题：**

页面是从上到下执行的，当加载到js中双击事件的时候，对应的input标签都还没有加载呢。

那如何解决这个问题？

要么将script标签放在input标签后面，要么采用如下方法：

![format_png 6][]

**③页面加载事件**

window.onload。根据其意思就能理解其表示的是网页加载完事件。

这是什么意思呢？

本来页面是从上到下依次执行的，当它加载到该事件的时候，相当于页面已经加载完了。

所以就算input标签在script标签的后面，也能触发事件。emm…暂且就是这样理解的。

## 三、js对象 ##

学一学js中内置的几种常用对象

**1数组对象**

![format_png 7][]

**①关于数组遍历**

在Java中数组直接打印是一串地址，但是在js中数组是可以直接打印的，数字之间用逗号隔开。

至于数组遍历，js和Java中一样，也是for循环遍历数组中的每一个元素，索引位从0开始。

**②关于数组越界**

在Java中，数组的长度确定后是不可变的，所以会出现越界问题。

但是在js中，数组的长度竟然是可变化的。

例子中直接给数组6索引位赋值，5索引位没有数字，默认为undefined（未定义数据）。

![format_png 8][]

**③关于数组方法**

Java中的数组是没有特有方法的，只有继承自Object的方法。

但是js中的数组是有很多方法的，并且方法有点类似于Java中的集合：

*  concat：将两个数组拼接成一个新的数组。
 *  reverse：将数组元素反转。
 *  join：将对应元素和数组中的元素逐个拼接。
 *  sort：将数组排序，直接排序默认是升序。
 *  sort：使用比较器，a-b为升序，b-a为降序。

其中值得注意的是：反转、排序方法是对数组本身产生了修改。

而其它方法对数组本身没有影响，只是形成了一个新的数组。

**2日期对象**

![format_png 9][]

**①日期对象**

直接打印是一串英文格式的日期。

**②getTime()**

也和Java中一样，获取系统当前时间的毫秒值。

**③toLocaleString()**

将时间格式转换成当前系统对应的本地格式。

在Java中，需要自定义格式，显得特别的麻烦，但是在js中直接调用该方法就可以了。

**3全局对象**

什么叫全局对象呢？

就是不用创建对象，直接可以使用该对象。

有点类似于Java中的静态方法，但是js中更简洁，连类名都没有的。

![format_png 10][]

**①parseInt()**

在Java中Integer类就有一个静态方法parseInt()，作用就是将字符串转换成int类型。

但是在js中，并不是完全是这样。它的作用是：

*  如果是字符串，会从首字母开始获取数字，一旦发现非数字字符，马上停止获取。
 *  如果是数字，遇到小数点就会停止获取内容。

**②parseFloat()**

该方法的作用和parseInt()的作用是大同小异的，区别在于是能转换成小数。

当带单位的数字（比如170cm）需要进行运算时，这两种方法会非常实用。

**③isNaN()**

该方法使用于对字符串的判断，见名知义，判断是否不是一个数字：

*  如果字符串不是纯数字，返回值为true。
 *  如果字符串是纯数字，返回值为false。

![format_png 11][]

**①encode编码**

可把字符串作为 URI 进行编码，让浏览器能看懂。

**②decode解码**

可以将编码过的URI进行解码。

编码后的URL我们是看不懂的，当浏览器上的参数被传入服务器时，又需要解码成我们能看得懂的。

## 最后 ##

谢谢你的观看。

如果可以的话，麻烦帮忙点个赞，谢谢你。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS9hZGYyOGZkMC0yNGQ3LTQ5NWEtOWIxZC01ZGY5MzBmYzQxZDUucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS9hN2Q0OWQ2MS1hMTk4LTRkZTUtYWQyYS1jNTkyMzEzYmJhNDAucG5n?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zdGF0aWMwMS5pbWdrci5jb20vdGVtcC9hYWU3ZjI2ZGUxNWU0YjA5YWM3ZGJiNWUwZmJkZmY3Mi5wbmc?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS84YzMxYzBiNS00YzcyLTRlZGItODFjYi00MzQ5NmFiYmVjNTcucG5n?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS83YTZjMDBmZi04YTgzLTQ1M2QtYTI1NS0wOGNiMzk0ZThhMmQucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS83ZjU1MjUxMS1lNzg0LTQyNWQtYTAxMS1iNDkwYWI0ZjJiZTgucG5n?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS9lZTQzNmYzMS00ODU2LTQzZjItYWQ0Yi05YzgyMDRjNmFmNzkucG5n?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS9mMzJkMjU2Yi0zMDVlLTQ1YmUtOTcwNi03ZTdlMTM4MGIyYWUucG5n?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS85MTkwNzU1Ny1iMTk3LTQ1NDUtOWZiZi1jYjE0YjgxNGQwNzIucG5n?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS9mZjgzMGMzMy1jNjcwLTQ2MWUtOWM0Mi1iNDUxMTUxZTIwM2YucG5n?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS9lMTA0ODBkOS0wNmI1LTQ0ZGUtYTAyZS02NmU5NDJlZDg5MzMucG5n?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWdrci5jbi1iai51ZmlsZW9zLmNvbS8zY2Y3ODAwMS0xYmRiLTQ3YTctOWFkNC0yZWUzZTA5YmU0NzAucG5n?x-oss-process=image/format,png