![3cf2ef3d066fc0aa5431a97a0dd3b721.png](https://i-blog.csdnimg.cn/blog_migrate/e10fd7aebbc86e98c9ffe58f245f7c73.jpeg)
什么是事件
事件,俗话说就是对一定事物产生一定的影响。 例如:我们打开一个网页,网页被打开的那一刻,首先触发的事件就是load事件,只有触发了这个事件,才会执行这部分代码。完成用户与浏览器之间特定的交互。
事件类型
web浏览器发生的事件有很多类型,不同的类型有着不同的信息。包含有:光标事件、表单 事件、页面事件、鼠标事件、键盘事件等。
一、鼠标事件
![d6b18cc153bc077c458c863fe27c0952.png](https://i-blog.csdnimg.cn/blog_migrate/9d6a05ec846551e3bdae94e80f02cb04.jpeg)
鼠标事件
onclick事件:
![bb559b858fdb5a65141954ca96c56092.png](https://i-blog.csdnimg.cn/blog_migrate/a5aa5ec3bbe3ca7b0c702337c1ccbed9.jpeg)
onclick事件
ondbclick事件:
![ab5633486c5c854b4b2f2a888d1dc812.png](https://i-blog.csdnimg.cn/blog_migrate/4c07cec03dc3287cbe0a2d6673fe9587.jpeg)
ondbclick事件
onmousedown事件:
![bb4c2a16d905ad0a8c4a9abe7f0cc6e9.png](https://i-blog.csdnimg.cn/blog_migrate/ccaad61990c46eab6d03aef7c3555d63.jpeg)
onmousedown事件
onmouseup事件:
![0f3c29e03002dcd10856a6b63278824b.png](https://i-blog.csdnimg.cn/blog_migrate/bdec473d3e45552ad38c91c4f068ee9a.jpeg)
onmouseup事件
二、键盘事件
![39b7e1c85dd63c587395e2a5b35285f5.png](https://i-blog.csdnimg.cn/blog_migrate/d9ef47d09fc5eaf890a45b477a8c241c.jpeg)
键盘事件
用户在使用键盘时会触发键盘事件。常用的键盘事件有3种:
1、keydown:按下键盘上的任意按键会触发事件,如果按住按键不放,则会重复触发事件。
2、keyup:当释放键盘按键时会触发事件。
3、keypress:当用户按住键盘上的字符键时会触发事件,如果按住不放,则会重复触发事件
![42d19e916942cbaceafb696d701078df.png](https://i-blog.csdnimg.cn/blog_migrate/77ea25cb324a95d34734403f24966922.jpeg)
键盘事件
三、光标事件
![dbc6eb23ec816735a2b40a175b07068c.png](https://i-blog.csdnimg.cn/blog_migrate/db9be9386a8a9f1a7e636954c31ae980.jpeg)
光标事件
焦点会在页面得到焦点或失去焦点时触发。
- focus,在得到焦点的元素上触发,这个事件不会冒泡。
- blur,在失去焦点的元素上触发,这个事件不会冒泡。
![b66ffe8bcf4c24228d47c615d0c65655.png](https://i-blog.csdnimg.cn/blog_migrate/6ba78e641f846912549fbff865c07767.jpeg)
光标事件示例
四、表单事件
![a0a3c616a36b0e05649a7720ad857985.png](https://i-blog.csdnimg.cn/blog_migrate/9bdc3d9b4280b6d4e70255513f359c4b.jpeg)
表单事件
当页面涉及到form表单的时候会用到表单事件处理一些逻辑
![036f7d57766940827320ae1cfb8beac4.png](https://i-blog.csdnimg.cn/blog_migrate/36a311279d959f6d4e659b0cba7fb981.jpeg)
五、加载事件
![064d35abb8b10ba2bea8d8d61ef127ce.png](https://i-blog.csdnimg.cn/blog_migrate/e1348673d9b16265be713e231e228140.jpeg)
加载事件
load:当页面加载后在window上面触发,当所有框架加载完成后在框架上触发,window对象调用
unload:当页面卸载后在window上面触发。
如果我们想向页面中添加一个新元素,必须等页面加载完成后才能实现,如果在加载完成之前就操作document.body会报错的。
![5b9807ec1fbc9144ab4393b5018440cd.png](https://i-blog.csdnimg.cn/blog_migrate/76e8689bbe389bcfa94cd22bf08b968a.jpeg)
示例
五、滚动事件
![44aa97ef5d0581558a97b01dc914f258.png](https://i-blog.csdnimg.cn/blog_migrate/1d4b802e5ab3a5b08109ddf561e372b1.jpeg)
滚动事件
scroll是在window对象上发生的,但它实际上是反应了相应元素的变化,是反应
的scrollLeft、scrollTop的变化。文档可视区域高度 document.documentElement.clientHeight文档高度 document.documentElement.scrollHeight文档滚动高度(火狐|IE有效) document.documentElement.scrollTop文档滚动高度(谷歌有效) document.body.scrollTop元素高度/元素宽度(不含边框) div.clientHeight/clientWidth元素高度/元素宽度(含边框) div.offsetHeight /offsetWidth
![b0a6d7487ca3dba1bb8d0b34a56d3367.png](https://i-blog.csdnimg.cn/blog_migrate/a6458522beb1adf91756e3c44cc4ef43.jpeg)
示例