Javascript事件监听

最新推荐文章于 2024-11-09 00:53:03 发布

最新推荐文章于 2024-11-09 00:53:03 发布 · 128 阅读

文章标签：

本文探讨了事件监听机制在浏览器中的实现方式，通过对比直接赋值元素事件属性的方法，阐述了事件监听的优势，尤其是在团队协作中避免事件覆盖的问题，并提供了具体的代码示例。

firefox中addEventListener()方法和ie中attachEvent()方法都是为HTML元素添加一个事件监听

为什么要采用事件监听而不是直接对元素的事件属性（如：onclick、onmouseover）赋值？

这两种方法处理事件还是有很大区别的！事件属性只能赋值一种方法，即：

button1.onclick=function(){alert(1);};

button1.onclick=function(){alert(2);};

这样后面的赋值语句就将前面的onclick属性覆盖了。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CodaBubbleExample</title>

</head>

<body>

<buttonid="Button1">测试</button>

<scripttype="text/javascript">

///<summary>
///添加事件监听

///</summary>

///<paramname="target">载体</param>

///<paramname="type">事件类型</param>

///<paramname="func">事件函数</param>
functionaddEventHandler(target,type,func){
if(target.addEventListener)
target.addEventListener(type,func,false);
elseif(target.attachEvent)
target.attachEvent("on"+type,func);
elsetarget["on"+type]=func;
}

///<summary>
///移除事件监听

///</summary>

///<paramname="target">载体</param>

///<paramname="type">事件类型</param>

///<paramname="func">事件函数</param>
functionremoveEventHandler(target,type,func){
if(target.removeEventListener)
target.removeEventListener(type,func,false);
elseif(target.detachEvent)
target.detachEvent("on"+type,func);
elsedeletetarget["on"+type];
}

varButton1=document.getElementById("Button1");

varButton1Click=function(){alert(1);};
addEventHandler(Button1,"click",Button1Click);
addEventHandler(Button1,"click",function(){alert(2);});
addEventHandler(Button1,"click",function(){alert(3);});
removeEventHandler(Button1,"click",function(){alert(2);});//移不出
removeEventHandler(Button1,"click",Button1Click);//可以移除

</script>

</body>

</html>

而添加事件监听就可以并行。

特别是当团队合作时，事件并行的需求增多，比如：监听document对象的鼠标事件或者window对象的载入事件等。
使用事件属性则很容易造成事件覆盖掉。

经过测试IE(8)中先显示3再显示2，而firefox(3)中则先显示2再显示3
这个是为什么呢？测试的结果即真理，没啥好想的。囧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Coda Bubble Example</title> </head> <body> <button id="Button1">测试</button> <script type="text/javascript"> function addEventHandler(target, type, func) { if (target.addEventListener) target.addEventListener(type, func, false); else if (target.attachEvent) target.attachEvent("on" + type, func); else target["on" + type] = func; } function removeEventHandler(target, type, func) { if (target.removeEventListener) target.removeEventListener(type, func, false); else if (target.detachEvent) target.detachEvent("on" + type, func); else delete target["on" + type]; } var Button1 = document.getElementById("Button1"); var Button1Click = function() { alert(1); }; addEventHandler(Button1, "click", Button1Click); addEventHandler(Button1, "click", function() { alert(2); } ); addEventHandler(Button1, "click", function() { alert(3); } ); removeEventHandler(Button1, "click", function() { alert(2); } ); removeEventHandler(Button1, "click", Button1Click); </script> </body> </html>
运行代码 <script type="text/javascript"> function viewPage() { var view = document.getElementById("TextareaView"); var win = window.open('', '', ''); win.opener = null; win.document.write(view.value); win.document.close(); }</script>