JS-DOM:Event 对象
事件(event)由事件及事件方法组成:
(事件对象的兼容写法:window.event||event)
1、鼠标事件:
mousedown、mousemove、mouseup、ondbclick、contextmenu...
2、表单事件:
focus、blur、submit、change...
3、键盘事件
keydown、keyup、keypress...
4、阻止冒泡
oEvent.cancelBubble=true;
5、阻止默认事件
return false;
6、键盘方法
keyCode
1、onblur :失去焦点
<script>
window.onload=function(){
var oTxt=document.getElementById("txt1");
oTxt.onblur=function(){
alert("失去焦点");
}
}
</script>
2、oncontextmenu:用oncontextmenu事件单禁用右键菜单
<script>
document.oncontextmenu=function(){
alert(‘a‘);
}
</script>
3 、ondblclick: 鼠标双击事件
<srcipt>
window.ondblclick=function(){
alert(‘a‘);
}
</script>
4、onfocus: onFocus事件就是当光标落在文本框中时发生的事件
<script>
window.onload=function(){
var oTxt=document.getElementById("txt1");
oTxt.onfocus=function(){
alert("聚焦了");
}
}
</script>
<body>
<input type="text" id="txt1" value="请输入文本">
</body>
5、onmousedown : 鼠标按钮被按下 ... onmouse up : 鼠标按键被松开
<style type="text/css">
#div1{
height: 100px;
width: 100px;
background-color: #ccc;
}
</style>
<script type="text/javascript">
window.onload=function (){
document.onmousedown=function(){
alert(‘a‘);
}
}
</script>
<script type="text/javascript">
window.onload=function (){
document.onmouseup=function(){
alert(‘a‘);
}
}
</script>
<body>
<div id="div1"></div>
</body>
6、onmousemove :鼠标被移动
<style type="text/css">
#div1{
height: 100px;
width: 100px;
background-color: #ccc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
document.onmousemove=function(ev){
var oEvent=ev||window.event;
document.title=oEvent.clientX;
oDiv.style.left=oEvent.clientX+"px";
oDiv.style.top=oEvent.clientY+"px";
}
}
</script>
<body>
<div id="div1"></div>
</body>
未完待续。。。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。