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

JS-DOM:Event 对象

时间:2014-08-06 22:41:32      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:style   color   java   io   strong   ar   cti   div   

事件(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>

 

未完待续。。。

JS-DOM:Event 对象,布布扣,bubuko.com

JS-DOM:Event 对象

标签:style   color   java   io   strong   ar   cti   div   

原文地址:http://www.cnblogs.com/lxbchengxunyuan/p/3895704.html

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