事件:
文档或浏览器窗口发生的一些特定的交互瞬间
HTML事件
直接在HTML元素标签内添加事件,执行脚本
语法:
<tag 事件 = "执行脚本"></tag>
功能:
在HTML元素上绑定事件
说明:
执行脚本可以是一个函数的调用
HTML事件绑定时,直接在标签内添加对应的事件即可
补充: 在事件触发的函数中,this是对该DOM对象的引用
执行脚本为函数
DOM0级事件
先通过DOM将元素取出再对其进行绑定事件
- 通过DOM 事件获取脚本元素
- (获取HTML元素).事件 = 执行脚本
语法:
ele.事件 = 执行脚本
功能:
在DOM对象上绑定事件
说明:
执行脚本可以是一个匿名函数,也可以是一个函数的调用
小栗子:
不建议使用HTML时间的原因:
多元素绑定相同按钮时,效率变低
不建议在HTML元素中写Javascript代码
调用函数:
注意:在调用过程中函数名之后不加括号。(若添加括号,则无需触发就会调用该函数)
鼠标事件
onload
浏览器执行代码的顺序是从上到下的 ,所以一般情况下,将js脚本放置在body的最后,这样可以保证js语句不会报错
若需要在head中添加js脚本时,可使用window.onload,作用对象为window这个对象,使这部分内容在页面加载时执行
小栗子:
onfocus与onblur
onfocus:获得焦点时触发
onblur:失去焦点时触发
说明:
该事件用于
- input标签type为tetx,password,textarea
举个栗子:
应用这两个事件,来完成判断文本框输入电话号码的正确性
Js代码:
HTML与CSS
效果:
onchange
域的内容改变时发生,一般作用于select,checkbox或radio
小栗子:
onsubmit
表单中的确认按钮被点击时发生
注意:
onsubmit事件不是加在按钮上,而是表单上!!!
onmousedown
鼠标按钮在元素上按下时触发
onmouseup
在元素上松开鼠标按钮时触发
onmousedown与onmouseup共同构成了onclick
三个合集小栗子:
onresize(作用于window)
当调整浏览器窗口的大小时触发
onscroll(作用于window)
拖动滚动条滚动时触发
两个合集小栗子:
键盘事件
- onkeydown: 在用户按下一个键盘按键时发生
- onkeypress:在键盘按键被按下并释放一个键时发生
- onkeyup:在键盘按键被松开发生
- kecode:返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码,或键的代码
event代表事件的状态,如触发event对象的元素、鼠标的位置及状态
小栗子:
使用键盘事件完成日常使用的评价框的效果