目录 1.窗口事件 onblur :失去焦点 onfocus:获得焦点 onload:窗口加载事件 onresize:窗口大小缩放事件 二、表单事件 oninput :当文本框内容改变时 ,立即将改变内容 输出在控制台 onchange: 内容改变事件 onclick:鼠标单击时触发此事件 三、键盘事件 onkeydown:当键盘上的某个按键被按下时触发此事件 onkeyup:当键盘上的某个按键被按下后(长按不会触发)按键回弹才会触发此事件 onkeypress:按下某个按键后触发(长按也能触发) 四、鼠标事件 onclick:鼠标单击时触发此事件 ondblclick:鼠标双击时触发此事件 onmousedown:鼠标按下时触发此事件(长按触发不了事件) onmouseup:鼠标弹起时触发的事件 onmouseover:鼠标移动到某个设置了此事件的元素上时触发此事件 onmousemove:鼠标移动时触发此事件 onmouseout:鼠标从某个设置了此事件的元素上离开时触发此事件 onmousewheel:鼠标的滚轮运行时触发
前言: 我们用到JavaScript的时候js的事件就显得特别重要了
1.窗口事件
窗口事件 onblur 失去焦点 onfocus 获得焦点 onload 窗口加载事件 onresize 窗口大小缩放事件
onblur :失去焦点
onfocus:获得焦点
window. onblur = function ( ) { alert ( '窗口失去了焦点!' ) ; } window. onfocus = function ( ) { alert ( '窗口获得了焦点!' ) ; }
onload:窗口加载事件
onresize:窗口大小缩放事件
window. onload = function ( ) { console. log ( "窗口加载完成!" ) }
window. onresize = function ( ) { console. log ( "窗口大小正在发送生改变" ) ; }
二、表单事件
表单事件 oninput 当文本框内容改变时 ,立即将改变内容 输出在控制台 onchange 内容改变事件 onclick 鼠标单击时触发此事件
oninput :当文本框内容改变时 ,立即将改变内容 输出在控制台
< ! -- oninput 当文本框内容改变时 ,立即将改变内容 一个个的输出在控制台 -- >
< input type= "text" id= "userCode" oninput= "console.log(document.getElementById('userCode').value);" >
onchange: 内容改变事件
< ! -- onchange 内容改变事件-- >
< input type= "text" id= "a1" onchange = "console.log(document.getElementById('a1').value);" >
onclick:鼠标单击时触发此事件
< input type= "button" value= "点我!" onclick= "console.log('被点击')" >
三、键盘事件
键盘事件 onkeydown 当键盘上的某个按键被按下时触发此事件 onkeyup 当键盘上的某个按键被按下后(长按不会触发)按键回弹才会触发此事件 onkeyup 按下某个按键后触发(长按也能触发)
onkeydown:当键盘上的某个按键被按下时触发此事件
window. onkeydown = function ( event ) { event = event || window. event; console. log ( "键盘按下了" + event. keyCode) ; if ( event. keyCode === 13 ) { console. log ( '按下了回车' ) ; } }
onkeyup:当键盘上的某个按键被按下后(长按不会触发)按键回弹才会触发此事件
window. onkeyup = function ( event ) { event = event || window. event; console. log ( "键盘按下了" + event. keyCode) ; if ( event. keyCode === 13 ) { console. log ( '按下了回车' ) ; } }
onkeypress:按下某个按键后触发(长按也能触发)
window. onkeypress = function ( event ) { event = event || window. event; console. log ( "键盘按下了" + event. keyCode) ; if ( event. keyCode == 13 ) { console. log ( '按下了回车' ) ; } }
四、鼠标事件
鼠标事件 onclick 鼠标单击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 鼠标按下时触发此事件 onmouseup 鼠标弹起时触发的事件 onmouseover 鼠标移动到某个设置了此事件的元素上时触发此事件 onmousemove 鼠标移动时触发此事件 onmouseout 鼠标从某个设置了此事件的元素上离开时触发此事件 onmousewheel 当鼠标的滚轮运行时
onclick:鼠标单击时触发此事件
< input type= "button" value= "点我!" onclick= "console.log('被点击')" >
ondblclick:鼠标双击时触发此事件
< input type= "button" value= "双击我!" ondblclick= "console.log('被双击')" >
onmousedown:鼠标按下时触发此事件(长按触发不了事件)
< input type= "button" value= "点我!" onmousedown= "console.log('被点击')" >
onmouseup:鼠标弹起时触发的事件
< input type= "button" value= "点我!" onmouseup= "console.log('被点击')" >
onmouseover:鼠标移动到某个设置了此事件的元素上时触发此事件
< input type= "button" value= "点我!" onmouseover= "console.log('移动')" >
onmousemove:鼠标移动时触发此事件
< input type= "button" value= "点我!" onmousemove= "console.log('移动')" >
onmouseout:鼠标从某个设置了此事件的元素上离开时触发此事件
< input type= "button" value= "点我!" onmouseout= "console.log('移开控件')" >
onmousewheel:鼠标的滚轮运行时触发
window. onmousewheel = function ( ) { console. log ( "鼠标的滚轮运行时" ) ; }
总结: 其实JavaScript的事件作用给用户带来了很多便捷,我们也可以更方便的收集到用户的信息,单词虽多,但也有规律