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>

 

未完待续。。。

JS-DOM:Event 对象,古老的榕树,5-wow.com

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