包头企业网站,汕头网站推广哪家好,成都建站模板网站开发,关闭小程序api目录 1.窗口事件onblur :失去焦点onfocus:获得焦点onload:窗口加载事件onresize:窗口大小缩放事件 二、表单事件oninput #xff1a;当文本框内容改变时 #xff0c;立即将改变内容 输出在控制台onchange#xff1a; 内容改变事件onclick#xff1a;鼠标单击时触发此事件 三… 目录 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 typetext iduserCode oninputconsole.log(document.getElementById(userCode).value);onchange 内容改变事件
!--onchange 内容改变事件--
input typetext ida1 onchange console.log(document.getElementById(a1).value);onclick鼠标单击时触发此事件
input typebutton value点我 onclickconsole.log(被点击)三、键盘事件
键盘事件onkeydown当键盘上的某个按键被按下时触发此事件onkeyup当键盘上的某个按键被按下后长按不会触发按键回弹才会触发此事件onkeyup按下某个按键后触发长按也能触发
onkeydown当键盘上的某个按键被按下时触发此事件 // 键盘按下事件把回车键值输出改为按下了回车window.onkeydown function (event) {// 解决兼容问题event event || window.event;console.log(键盘按下了 event.keyCode);if (event.keyCode 13) {console.log(按下了回车);}}onkeyup当键盘上的某个按键被按下后长按不会触发按键回弹才会触发此事件 /* onkeyup 当松开按键时 触发 */window.onkeyup function (event) {event event || window.event;console.log(键盘按下了 event.keyCode);if (event.keyCode 13) {console.log(按下了回车);}}onkeypress按下某个按键后触发长按也能触发
/*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 typebutton value点我 onclickconsole.log(被点击)ondblclick鼠标双击时触发此事件
input typebutton value双击我 ondblclickconsole.log(被双击)onmousedown鼠标按下时触发此事件长按触发不了事件
input typebutton value点我 onmousedownconsole.log(被点击)onmouseup鼠标弹起时触发的事件
input typebutton value点我 onmouseupconsole.log(被点击)onmouseover鼠标移动到某个设置了此事件的元素上时触发此事件
/*移动到按钮上面触发*/
input typebutton value点我 onmouseoverconsole.log(移动)onmousemove鼠标移动时触发此事件
/*在控键范围内移动都能触发*/
input typebutton value点我 onmousemoveconsole.log(移动)onmouseout鼠标从某个设置了此事件的元素上离开时触发此事件
/*鼠标进入控键元素再移出控键元素触发*/
input typebutton value点我 onmouseoutconsole.log(移开控件)onmousewheel:鼠标的滚轮运行时触发 window.onmousewheelfunction (){console.log(鼠标的滚轮运行时);}总结 其实JavaScript的事件作用给用户带来了很多便捷我们也可以更方便的收集到用户的信息单词虽多但也有规律
