![33eada69fc67f45783ffbbb3c1b813d1.png](https://i-blog.csdnimg.cn/blog_migrate/cb2e218f0c2f12bf18ebc14ef0682403.jpeg)
本章介绍web前端开发JavaScript事件讲解上篇,小伙伴可以根据自己学习风格学习观看文章版或者视频版,以下是视频版可以点击观看
https://www.bjsxt.com/down/9225.htmlwww.bjsxt.com![1534050bcce0be31f0b00b91ca69fac3.png](https://i-blog.csdnimg.cn/blog_migrate/8a7573c3c99f8106721ba208d0c0deaf.png)
![1534050bcce0be31f0b00b91ca69fac3.png](https://i-blog.csdnimg.cn/blog_migrate/8a7573c3c99f8106721ba208d0c0deaf.png)
![babd6e3a4ac5b80c5cebf95111f71662.png](https://i-blog.csdnimg.cn/blog_migrate/4fd673a4f346c4f30ec84db6c6d46cb8.jpeg)
一、关于事件
1.1 什么是事件
事件就是在文档中或者在浏览器窗口中通过某些动作触发。比如,单击,鼠标经过,键盘按下等。事件通常和函数结合使用。
事件的作用:
(1)各个元素之间可以借助事件来进行交互
(2)用户和页面之间也可以通过事件来交互
(3)后端和页面之间也可以通过事件来交互(减缓服务器的压力)
Onsubmit(提交事件和表单一起使用)
1.2 事件分类
1、鼠标事件
onclick、ondblclick、onmouseover、onmouseout、onmousedown、onmouseup、onmousemove
2、HTML事件
onload、onscoll、onsubmit、onchange、onfoucs(获取焦点),onblur(失去焦点)
3、键盘事件
onkeydown: 键盘按下时触发
onkeypress:键盘按下并松开的瞬间触发
onkeyup: 键盘抬起时触发
二、事件的使用(重点)
2.1 HTML事件
绑定操作发生在HTML代码中的事件,称为HTML事件。
语法:on+事件=‘函数();函数();函数();……‘
HTML事件的移除方式:
元素.setAttribute('on+事件名',null);
HTML事件缺陷:耦合性太强了,修改一处另一处也要修改。
当函数没有加载成功时,用户去触发事件,则会报错。
![a3f2587ffe43dbd0268aaba9b6b4c420.png](https://i-blog.csdnimg.cn/blog_migrate/1f691cc9f9ad07101061f358f5ab0106.jpeg)
2.2 DOM0级事件
DOM0事件调用函数的几种方式:
- 节点.事件=function(){}
- 节点.事件=函数名
![ddcfce74b0eb2485dd9951604b97afeb.png](https://i-blog.csdnimg.cn/blog_migrate/3b43d5afd3fdfa796c1523fa88c8a73b.png)
3.<input type=”button” οnclick=”函数名”>