js常用事件演示

目录

JS事件的具体方法

窗口事件

表单事件

键盘事件

鼠标事件

知识小拓展

---

JS事件的具体方法

我们用到JavaScript的时候js的事件就显得特别重要了

事件名	说明
onsubmit	当表单提交时触发该事件
onclick	鼠标单击事件
ondblclick	鼠标双击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	用户改变域的内容
onload	某个页面或图像完成加载

窗口事件

当鼠标打开页面后，再点击其他文件窗口是就会触发焦点事件

 onblur :失去焦点
 onfocus:获得焦点
 

代码示例

window.onblur=function (){
console.log('窗口失去焦点')
}

window.onfocus=function (){
console.log('当窗口获得焦点时')
}

运行结果

                

 onload:窗口加载事件
 onresize:窗口大小缩放事件

代码示例

window.onload=function () {
console.log('窗口加载事件')
}

window.onresize=function () {
console.log('窗口大小缩放事件')
}

运行结果

表单事件

onchange： 内容改变事件
 oninput ：当文本框内容改变时 ，立即将改变内容 输出在控制台

 userCo.onchange=function () {

 console.log(userCo.value)
 }

userCo.oninput=function () {
console.log(userCo.value)

}

oninvalid:获取表单 未能提交时
 onselect:当文本框内容被选中时

获取表单 未能提交时

代码示例

userCo.oninvalid = function () {
 console.log("请您完成表单的内容!");
 }

/* 当文本框内容被选中时 */
function nnj () {
// this
alert("您已经选择了文本框!");
}

// onclick:点击事件
buta.onclick=function () {
console.log('点击')
}

运行结果如下

键盘事件

onkeydown：当键盘上的某个按键被按下时触发此事件
 onkeyup：当键盘上的某个按键被按下后弹起时触发此事件
 onkeypress：当输入有效的字符按键时触发此事件
 键盘按下事件

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('按下了回车')
}
}

运行如下

鼠标事件

代码示例

运行如下

/* onmouseenter ： 可以阻止事件冒泡 */

function divMouseenter() {
console.log("当鼠标进入了当前的DIV");
}

function divMouseleave() {
console.log("当鼠标移出了当前的DIV");
}

document.getElementById("box").onscroll = function () {
console.log("当滚动元素的滚动条运行时");
}
/* 当鼠标的滚轮运行时 */
window.onmousewheel=function (){
console.log("当鼠标的滚轮运行时");
}

运行结果如下

知识小拓展

需要了解的事件

事件名	说明
onkeydown	某个键盘的键被按下
onkeypress	某个键盘是键被按下或按住
onkeyup	某个键盘的按键被松开
onmousedown	某个键盘的按键被按下
onmouseup	鼠标按键被松开
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开