JavaScript中的load事件的作用_javascript中的事件

什么是事件

事件，俗话说就是对一定事物产生一定的影响。 例如：我们打开一个网页，网页被打开的那一刻，首先触发的事件就是load事件，只有触发了这个事件，才会执行这部分代码。完成用户与浏览器之间特定的交互。

事件类型

web浏览器发生的事件有很多类型，不同的类型有着不同的信息。包含有：光标事件、表单 事件、页面事件、鼠标事件、键盘事件等。

一、鼠标事件

鼠标事件

onclick事件:

onclick事件

ondbclick事件：

ondbclick事件

onmousedown事件：

onmousedown事件

onmouseup事件:

onmouseup事件

二、键盘事件

键盘事件

用户在使用键盘时会触发键盘事件。常用的键盘事件有3种：

1、keydown：按下键盘上的任意按键会触发事件，如果按住按键不放，则会重复触发事件。

2、keyup：当释放键盘按键时会触发事件。

3、keypress：当用户按住键盘上的字符键时会触发事件，如果按住不放，则会重复触发事件

键盘事件

三、光标事件

光标事件

焦点会在页面得到焦点或失去焦点时触发。

• focus，在得到焦点的元素上触发，这个事件不会冒泡。
• blur，在失去焦点的元素上触发，这个事件不会冒泡。

光标事件示例

四、表单事件

表单事件

当页面涉及到form表单的时候会用到表单事件处理一些逻辑

五、加载事件

加载事件

load：当页面加载后在window上面触发，当所有框架加载完成后在框架上触发，window对象调用

unload：当页面卸载后在window上面触发。

如果我们想向页面中添加一个新元素，必须等页面加载完成后才能实现，如果在加载完成之前就操作document.body会报错的。

示例

五、滚动事件

滚动事件

scroll是在window对象上发生的，但它实际上是反应了相应元素的变化，是反应

的scrollLeft、scrollTop的变化。

文档可视区域高度 document.documentElement.clientHeight文档高度 document.documentElement.scrollHeight文档滚动高度(火狐|IE有效) document.documentElement.scrollTop文档滚动高度(谷歌有效) document.body.scrollTop元素高度/元素宽度(不含边框) div.clientHeight/clientWidth元素高度/元素宽度(含边框) div.offsetHeight /offsetWidth 

示例