事件对象:event;用于获取事件的信息,如:clientX,clientY,keyCode,等;
var oEvent=ev||event; //ev在ie下需要传参数ev ,event,在firefox,chrome下;
function(ev){
var oEvent=ev||event;
}
document.onclick;document是html和<!Doctype>的父节点;当要在浏览器窗口界面任意点上触发事件时,用document.
事件冒泡:一个对象触发事件后,会向它的包含对象传递,触发包含对象的事件;
取消冒泡:在最初触发事件的对象里取消冒泡,oEvent.cancelBubble=true;
跟按键相关的事件:onkeydown,onkeyup ,onkeypress;
oEvent.keyCode 按键对应的码;
ctrlKey,altKey,shiftKey返回true or false;
仿下拉列表:
点击按钮,div显示,在空白处任意点点击,div消失。用到取消冒泡,使得点击按钮后到外围对象上的冒泡被取消。
<script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oDiv=document.getElementById('div1'); oBtn.onclick=function (ev) { var oEvent=ev||event; oDiv.style.display='block'; //alert('按钮被点击了'); oEvent.cancelBubble=true; }; document.onclick=function () { oDiv.style.display='none'; //alert('document被点击了'); }; }; </script>
按键提交信息:
用Enter+Ctrl键,提交信息;
可以用if条件判断,如果oEvent.keyCode=13 && oEvent.ctrlKey==true;,则在文本域中显示信息;
js代码
<script> window.onload=function () { var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); oTxt1.onkeydown=function (ev) { var oEvent=ev||event; if(oEvent.keyCode==13 && oEvent.ctrlKey) { oTxt2.value+=oTxt1.value+'\n'; oTxt1.value=''; } }; }; </script>
div跟随鼠标移动:
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
oDiv.style.left=oEvent.clientX+scrollLeft+'px';//鼠标的绝对位置;
oDiv.style.top=oEvent.clientY+scrollTop+'px';
<script> function getPos(ev) { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}; } document.onmousemove=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById('div1'); var pos=getPos(oEvent); oDiv.style.left=pos.x+'px'; oDiv.style.top=pos.y+'px'; }; </script>
一串div跟随鼠标:
后一个div的位置等于前一个的位置
第一个div等于鼠标的位置;
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<script> function getPos(ev) { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}; } document.onmousemove=function (ev) { var aDiv=document.getElementsByTagName('div'); var oEvent=ev||event; var pos=getPos(oEvent); for(var i=aDiv.length-1;i>0;i--) { aDiv[i].style.left=aDiv[i-1].offsetLeft+'px'; aDiv[i].style.top=aDiv[i-1].offsetTop+'px'; } aDiv[0].style.left=pos.x+'px'; aDiv[0].style.top=pos.y+'px'; }; </script>
键盘控制div移动:
← →↑↓判断按键对应的keyCode;
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<script> document.onkeydown=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById('div1'); if(oEvent.keyCode==37) { oDiv.style.left=oDiv.offsetLeft-10+'px'; } else if(oEvent.keyCode==39) { oDiv.style.left=oDiv.offsetLeft+10+'px'; } }; </script>