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

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 (){
    //键盘按键被按下并松开时执行函数
}

JS中一些常用的事件(笔记),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。