JS中一些常用的事件(笔记)

2022-10-03 09:38:16

window.onload事件：当文档和其所有外部资源(如图片)完全加载并显示给用户时就会触发它。

window.onload = function (){
    //当加载完当前页面和其所有外部资源(如图片)后，执行这个函数
}

window.onunload事件：当用户离开当前页面时会触发该事件

window.onunload = function (){
    //离开该页面时执行该函数
}

event对象：该对象代表了当前事件的状态，并且只有在事件发生的过程中才生效。对象中存放的是键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。

click事件：鼠标左按钮点击事件。

var tag = document.getElementById(‘IDname‘);
tag.onclick = function (event){
    //单击tag元素就执行该函数
}

contextmenu事件：鼠标右按钮点击事件

//取消鼠标右键
var bodyEle = document.getElementsByTagName(‘body‘)[0];
bodyEle.oncontextmenu=‘return false‘

dblclick事件：鼠标左按钮双击事件

var tag = document.getElementById(‘IDname‘);
tag.ondblclick= function (event){
    //双击tag元素就执行该函数
}

mousedown事件：按下鼠标左按钮时触发的事件

var tag = document.getElementById(‘IDname‘);
tag.onmousedown = function (){
    //在tag元素上按下鼠标左键时就执行该函数
}

mouseup事件：释放鼠标左按钮时触发的事件

var tag = document.getElementById(‘IDname‘);
tag.onmouseup = function (){
    //在tag元素上释放鼠标左键时就执行该函数
}

mousemove事件：移动鼠标时触发的事件

var tag = document.getElementById(‘IDname‘);
tag.onmousemove = function (){
    //在tag元素上移动鼠标时就执行该函数
}

mouseover事件：当鼠标进入某个元素范围时触发

var tag = document.getElementById(‘IDname‘);
tag.onmouseover = function (){
    //当鼠标移入tag元素上时就执行该函数
}

mouseout事件：当鼠标移出某个元素范围时触发

var tag = document.getElementById(‘IDname‘);
tag.onmouseout = function (){
    //当鼠标移出tag元素上时就执行该函数
}

keyup事件：键盘按键被松开时触发

//tag元素一般是一个input元素，输入框
var tag = document.getElementById(‘IDname‘);
tag.onkeyup = function (){
    //键盘按键被松开时执行函数
}

keydown事件：键盘按键被按下时触发

//tag元素一般是一个input元素，输入框
var tag = document.getElementById(‘IDname‘);
tag.onkeydown = function (){
    //键盘按键被按下时执行函数
}

keypress事件：键盘按键被按下并松开时触发

//tag元素一般是一个input元素，输入框
var tag = document.getElementById(‘IDname‘);
tag.onkeypress = function (){
    //键盘按键被按下并松开时执行函数
}

码农公寓