通过对javascript权威指南第四版第十九章事件与事件处理的学习,基本了解了不同浏览器(IE5+, IE4, firefox, netscape)的事件模型的区别。本例子根据不同浏览器的不同事件模型实现方法,实现支持所有浏览器的脚本,并且可以看出不同事件模型的区别。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
/**说明:自动判断浏览器是否支持,运行此程序。
*该函数由mousedown事件处理程序中调用它时,它允许用户拖动文档元素。
*beginDrag()的第一个参数必须是一个文档元素,该元素用CSS position性质绝对定位。在style性质中,CSS性质的left和top
*必须被明确地设置为像素值,第二个参数是与触发mousedown事件相关的事件对象。
**/
function beginDrag(elementToDrag, event) {
var x = parseInt(elementToDrag.style.left);
var y = parseInt(elementToDrag.style.top);
//计算一个点和鼠标点击(event.clientX,event.clientY)的位置之间的距离
var deltaX = event.clientX - x;
var deltaY = event.clientY - y;
if (document.addEventListener) //是否支持2级DOM事件模型
{
//document.write("该浏览器支持DOM L2事件模型");
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent) //是否支持IE 5+事件模型
{
//document.write("该浏览器是IE5+, 不支持DOM L2事件模型");
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
else //IE 4事件模型
{ //在IE4我们不能使用attachEvent()方法,所以存储了以前赋予的处理程序后,
//直接赋予新的事件处理程序.这样还可以恢复旧的处理程序.
//注意:这同样依赖于事件气泡.
//document.write("该浏览器是IE4");
var oldmovehandler=document.onmousemove;
var olduphandler=document.onmouseup;
document.οnmοusemοve=moveHandler;
document.οnmοuseup=upHandler;
}
//我们已经处理了该事件,不要让别的元素看到它。
//Event接口还定义了两个方法,即stopPropagation()和preventDefault()
if (event.stopPropagation)
{
event.stopPropagation();//stopPropagation()可以阻止事件从当前正在处理它的节点传播。
}else{
event.cancelBubble=true;
}
if (event.preventDefault)
{
event.preventDefault();//preventDefault()阻止浏览器执行与事件相关的默认动作
}else{
event.returnValue=false;
}
//在2级DOM API中,可以调用preventDefault()方法,与在0级事件模型中返回false一样。(如自定义右键弹出窗口)
/**
*这是在元素被拖动时捕捉mousemove事件的处理程序。
**/
function moveHandler(e) {
//把元素移到当前的鼠标位置,根据初始鼠标点击的偏移量进行调整。
if (!e)
{
e=window.event;
}
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
// And don't let anyone else see this event.
//不要让别的元素看到该事件。
if (e.stopPropagation)
{
e.stopPropagation(); //DOM L2
}else{
e.cancelBubble=true; //IE
}
}
/**
*该处理程序将捕捉拖移结束时发生的mouseup事件。
**/
function upHandler(e) {
if (!e)
{
e=window.event;
}
//注销捕捉事件处理程序。
if (document.removeEventListener)
{
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent)
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}else
{
document.οnmοuseup=olduphandler;
document.οnmοusemοve=oldmovehandler;
}
// 不要让该事件进一步传播。
if (e.stopPropagation)
{
e.stopPropagation();
}else
{
e.cancelBubble=true;
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<!--定义要拖动的元素-->
<DIV style="position:absolute;left:100px;top:100px;border:solid black;">
<!-- 定义进行拖移的处理程序,注意onmousedown的性质 -->
<DIV style="border-bottom:dotted black;padding:3px;font-family:sans-setif;font-weight:bold;" οnmοusedοwn="beginDrag(this.parentNode,event);">
DRAG ME!!!HELLO!
</DIV>
</DIV>
<INPUT style="position:absolute;left:200px;top:200px;" TYPE="button" οnmοusedοwn="beginDrag(this,event);" value="可以移动的按钮">
</BODY>
</HTML>