常见的有以下8个:
mousedown:鼠标的键钮被按下。
mouseup:鼠标的键钮被释放弹起。
click:单击鼠标的键钮。
dblclick:鼠标的键钮被按下。
contextmenu :弹出右键菜单。
mouseover:鼠标移到目标的上方。
mouseout:鼠标移出目标的上方。
mousemove:鼠标在目标的上方移动。
mousedown:鼠标的键钮被按下。
mouseup:鼠标的键钮被释放弹起。
click:单击鼠标的键钮。
dblclick:鼠标的键钮被按下。
contextmenu :弹出右键菜单。
mouseover:鼠标移到目标的上方。
mouseout:鼠标移出目标的上方。
mousemove:鼠标在目标的上方移动。
mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown => mouseup => click。因此一个点击事件,通常会激发几个鼠标事件。
<script type="text/javascript">
var loadEvent = function(fn) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
}else {
window.onload = function() {
oldonload();
fn();
}
}
}
var checkevents = function(){
var demo = document.getElementById("mouse");
var ex = document.getElementById("explanation");
demo.onclick = function(){
ex.style.display = "block";
ex.innerHTML += "click<br>"
}
demo.ondblclick = function(){
ex.style.display = "block";
ex.innerHTML += "dblclick<br>"
}
demo.onmouseup = function(){
ex.style.display = "block";
ex.innerHTML += "mouseup<br>"
}
demo.onmousedown = function(){
ex.style.display = "block";
ex.innerHTML += "mousedown<br>"
}
demo.oncontextmenu = function(){
ex.style.display = "block";
ex.innerHTML += "contextmenu<br>"
}
}
var clearcontent = function(){
var reset = document.getElementById("clearcontent");
var ex = document.getElementById("explanation");
reset.onclick = function(){
ex.innerHTML = '';
ex.style.display = "none";
}
}
loadEvent(function(){
clearcontent();
checkevents();
})
</script>
<div id="mouse" style="width:500px;height:200px;background:#E8FFE8;border:2px solid #336699;">
请在这里点击,测试一个点击到底捆绑了多少种鼠标事件?!
</div>
<p><button type="button" id="clearcontent">清空</button></p>
<div id="explanation" style="width:500px;border:2px solid #336699;display:none;"></div>
JS鼠标事件大全
2009-01-20 10:53:17| 分类: ActiveX && JS |举报 |字号 订阅
|