码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-06-27 13:10:47      阅读:328      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   ext   color   

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中一些常用的事件(笔记),布布扣,bubuko.com

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

标签:style   class   blog   code   ext   color   

原文地址:http://www.cnblogs.com/zhuifeng/p/3808827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!