firefox中addEventListener()方法和ie中
attachEvent
()方法都是为HTML元素添加一个事件监听
为什么要采用事件监听而不是直接对元素的事件属性(如:onclick、onmouseover)赋值?
这两种方法处理事件还是有很大区别的!事件属性只能赋值一种方法,即:
这样后面的赋值语句就将前面的onclick属性覆盖了。
而添加事件监听就可以并行。
特别是当团队合作时,事件并行的需求增多,比如:监听document对象的鼠标事件或者window对象的载入事件等。
使用事件属性则很容易造成事件覆盖掉。
经过测试IE(8)中先显示3再显示2,而firefox(3)中则先显示2再显示3
为什么要采用事件监听而不是直接对元素的事件属性(如:onclick、onmouseover)赋值?
这两种方法处理事件还是有很大区别的!事件属性只能赋值一种方法,即:
- button1.onclick = function() { alert(1); };
- button1.onclick = function() { alert(2); };
- <!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">
- /// <summary>
- /// 添加事件监听
- /// </summary>
- /// <param name="target">载体</param>
- /// <param name="type">事件类型</param>
- /// <param name="func">事件函数</param>
- 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;
- }
- /// <summary>
- /// 移除事件监听
- /// </summary>
- /// <param name="target">载体</param>
- /// <param name="type">事件类型</param>
- /// <param name="func">事件函数</param>
- 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>
特别是当团队合作时,事件并行的需求增多,比如:监听document对象的鼠标事件或者window对象的载入事件等。
使用事件属性则很容易造成事件覆盖掉。
经过测试IE(8)中先显示3再显示2,而firefox(3)中则先显示2再显示3
这个是为什么呢?测试的结果即真理,没啥好想的。