JS事件
1.event
document.onclick = function () {
alert(event.clientX+","+event.clientY);
};
会发现在谷歌,IE下正常，但是在火狐下面不正常，在火狐下面可以这么写
document.onclick = function (ev) { alert(ev.clientX+","+ev.clientY); };
这个EV是什么了，我们alert(ev)看看
会发现是一个鼠标事件
为了兼容我们可以如下做
document.onclick = function (ev) {
if (ev) {
alert(ev.clientX + "," + ev.clientY);
}
else {
alert(event.clientX + "," + event.clientY);
}
};
这样看起来不是很简洁，我们更可以采用或运算
document.onclick = function (ev) {
var oEvent = ev || event;
alert(oEvent.clientX + "," + oEvent.clientY);
};
2.事件冒泡
HMTL：
<input id="btn1" type="button" value="显示" /> <div id="div1"> </div>
为了方便查看，稍微给点样式：
#div1 {width:100px; height:150px; background:#CCC; display:none;}
JS部分为
var oBtn=document.getElementById('btn1'); var oDiv=document.getElementById('div1'); oBtn.onclick=function (ev) { var oEvent=ev||event; oDiv.style.display='block'; oEvent.cancelBubble=true;//这里取消冒泡 }; document.onclick=function () { oDiv.style.display='none'; };
如果我们不加oEvent.cancelBubble=true,会发现点击按钮没反应，因为按钮处于document,事件冒泡DOCUMENT使之不显示了
3.根据鼠标移动的DIV
HTML为：
<body style="height:2000px;"> <div id="div1"></div> </body>
CSS为：
#div1{width:100px;height:100px;background:red;position:absolute;}
JS为：
document.onmousemove = function (ev) {
var oEvent = ev || event;
var oDiv = document.getElementById("div1");
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";
}
这样就完成了一个跟随鼠标移动的红色DIV
4 跟着鼠标移动的DIV
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> ......
CSS:
div {
width: 10px;
height: 10px;
background: red;
position: absolute;
}
JS:
var aDiv = document.getElementsByTagName("div"); var i = 0; document.onmousemove=function(ev){ var oEvent = ev || event; for (i = aDiv.length - 1; i > 0; i--) { aDiv[i].style.left = aDiv[i - 1].style.left; aDiv[i].style.top = aDiv[i - 1].style.top; } aDiv[0].style.left = oEvent.clientX + 'px'; aDiv[0].style.top = oEvent.clientY + 'px'; }
5.offsetWidth：元素的宽度 offsetHeight 元素的高度
<div id="div1"></div>
css:
#div1 {
width: 100px;
height: 100px;
background: red;
}
JS:
var oDiv = document.getElementById("div1");
alert(oDiv.offsetWidth);
弹出100；
我们改变下样式
#div1 {
width: 100px;
height: 100px;
background: red;
border:1px solid black;padding:10px;
}
弹出122，为div的宽度+2条边框+2边的内边距
我们再在后面加上margin:20px;弹出的仍旧是122，与外边距无关
offsetHeight用法类似
6.offsetLeft 元素离浏览器左边的距离
我们来做一个左右键控制div的移动
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';
}
}
7. ctrl+enter留言本
html:
<textarea id="txt1" rows="10" cols="40"></textarea><br /> <input id="txt2" type="text" /> <input id="btn1" type="button" value="留言" />
JS:
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
oBtn.onclick=function ()
{
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
};
oTxt2.onkeydown=function (ev)
{
var oEvent=ev||event;
if(oEvent.ctrlKey && oEvent.keyCode==13)
{
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
}
};
};
这样点击提交按钮或者ctrl+enter就能提交文本框内容了
8.自定义右键菜单：
我们需要先屏蔽系统本身的右键菜单，然后让我们自己定义的菜单显示
我们需要先布局一个右键菜单
<ul id="ul1"> <li>登陆</li> <li>回到首页</li> <li>注销</li> <li>加入VIP</li> </ul>
CSS:
* {margin:0; padding:0;}
#ul1 {width:100px; background:#CCC; border:1px solid black; position:absolute; display:none;}
JS:
document.oncontextmenu=function (ev)
{
var oEvent = ev || event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var oUl=document.getElementById('ul1');
oUl.style.display='block';
oUl.style.left=oEvent.clientX+scrollLeft+'px';
oUl.style.top=oEvent.clientY+scrollTop+'px';
return false;
};
document.onclick=function ()
{
var oUl=document.getElementById('ul1');
oUl.style.display='none';
};
9.只能输入数字的文本框
window.onload=function ()
{
var oTxt=document.getElementById('txt1');
oTxt.onkeydown=function (ev)
{
var oEvent=ev||event;
//alert(oEvent.keyCode);
//0 48
//9 57
//退格 8
if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
{
return false;
}
//return false;
};
};
这里没有判断小键盘的情况。
10 div的拖拽
<div id="div1"></div>
css:
#div1 {width:100px; height:100px; background:red; position:absolute;}
var oDiv=document.getElementById('div1'); var disX=0; var disY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; }; oDiv.onmousemove=function (ev) { var oEvent=ev||event; oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; };
我们发现我们鼠标并没有按下，它也在跟着移动
做以下完善：
var oDiv=document.getElementById('div1'); var disX=0; var disY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; oDiv.onmousemove=function (ev) { var oEvent=ev||event; oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; }; oDiv.onmouseup=function () { oDiv.onmousemove=null; oDiv.onmouseup=null; }; };
但是这样拖快了我们发现鼠标移到DIV外面去了，不受控制了，做如下修改
document.documentElement.clientWidth为可视区域的宽
var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0) { l=0; } else if(l>document.documentElement.clientWidth-oDiv.offsetWidth) { l=document.documentElement.clientWidth-oDiv.offsetWidth; } if(t<0) { t=0; } else if(t>document.documentElement.clientHeight-oDiv.offsetHeight) { t=document.documentElement.clientHeight-oDiv.offsetHeight; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; }; document.onmouseup=function () { document.onmousemove=null; document.onmouseup=null; }; return false; //阻止冒泡事件。火狐低版本有可能出现。 };
这样怎么也不会拖到可视区外面去。
