1、什么是页面事件?
window.event代表着事件对象的状态。只有在事件发生时生效。如鼠标、键盘等事件被触发时这个对象才存在。window.event这只在IE下是这样的。他并不是标准。。也就是说其他浏览器并不支持。在W3C标准支持的浏览器下事件对向是引发事件涵数的第一个参数,参数名随意,在下面的例子中我的事件对象的参数名是evt,也可以定义为其他名字.为了兼容IE浏览器可以这样写
<div id="obj"></div>
<script type="text/javascript">
document.getElementById("obj").οnclick=function(evt){
//获取的这个ID为obj的DIV对象就是个实例引起鼠标事件的元素
//evt代表事件对象(W3C DOM标准下)
var evt=evt || event; //标准化事件对象(W3C DOM 和IE DOM )
evt.Target=evt.Target || evt.srcElement;//标准化事件对象属性<引起事件的元素>
//(W3C DOM 和IE DOM )
evt.layerX=evt.layerX || evt.offsetX;//鼠标相对于引起事件的元素的父元素的X坐标(标准化IE)
evt.layerY=evt.layerY || evt.offsetY;//鼠标相对于引起事件的元素的父元素的Y坐标(标准化IE)
alert("相对这个DIV的X方向的坐标"+evt.layerX+"\n相对这个DIV的Y方向的坐标"+evt.layerY)
}
</script>
2、js中的代码介绍
var evt=window.event||e; // 这句话是跨浏览器的写法,在IE/Opera中,是window.event,而在Firefox中,是e
而事件的对象,在IE中是window.event.srcElement,在Firefox中是event.target,而在Opera中则两者都支持。
keyCode:监听键盘按下的是哪个键。键盘上的多数键都对应着一个一个ASCII码,比如输入“0”,那么keyCode=48,因为0在ASCII码中对应的值就是48.而对于ctrl、alt、shift这种键,判断方式又不一样,
if(event.shiftKey==true) { alert("你按了shift") }
if(event.ctrlKey==true) { alert("你按了ctrl") }if(event.altKey==true) { alert("你按了alt") }
//***********************************
这里顺便说一下判断鼠标按键的问题。
在 IE 里面
左键是 window.event.button = 1
右键是 window.event.button = 2
中键是 window.event.button = 4
没有按键动作的时候 window.event.button = 0
在 Firefox 里面
左键是 event.button = 0
右键是 event.button = 2
中键是 event.button = 1
没有按键动作的时候 event.button = 0
在 Opera 7.23/7.54 里面
鼠标左键是 window.event.button = 1
没有按键动作的时候 window.event.button = 1
右键和中键无法获取
而在 Opera 7.60/8.0 里面
鼠标左键是 window.event.button = 0
没有按键动作的时候 window.event.button = 0
右键和中键无法获取
下面我们写一个能在 IE4.01+/Firefox 0.9+/Opera 7.23+ 环境中均能运行正常的小程序,功能是用鼠标拖动层。
//***********************************
可用鼠标拖动的层var moving = false;
var initX = 0;
var initY = 0;
//*******************
// 获取触发事件的对象
//*******************
function findSrc(evt)
{
return( evt.target evt.target : evt.srcElement );
}
function start(evt)
{
//按下鼠标左键才允许移动
//evt.button == 1 IE/Opera 7.23/7.54
//evt.button == 0 Firefox/Opera 7.6+
if ( evt.button == 1 || evt.button == 0)
{
moving = true;
initX = evt.offsetX evt.offsetX : evt.layerX;
initY = evt.offsetY evt.offsetY : evt.layerY;
findSrc( evt ).style.cursor = "move";
window.status = "开始(button=" + evt.button + ")";
} else {
stop( evt );
}
}
function stop( evt )
{
moving = false;
findSrc( evt ).style.cursor = "";
window.status = "结束(button=" + evt.button + ")";
}
function move(evt)
{
//按下鼠标左键才允许移动
//evt.button == 1 IE/Opera 7.23/7.54
//evt.button == 0 Firefox/Opera 7.6+
if (moving && ( evt.button == 1 || evt.button == 0 ))
{
var intx = document.body.scrollLeft + evt.clientX; //获取当前鼠标位置的X坐标
var inty = document.body.scrollTop + evt.clientY; //获取当前鼠标位置的Y坐标
var div = findSrc( evt );
div.style.top = inty - initY;
div.style.left = intx - initX;
window.status = "X=" + intx + " Y=" + inty + " button=" + evt.button;
} else {
window.status = "已停止(button=" + evt.button + ")";
}
}
//-->