addEventListener()與attachEvent()區別: (摘自: http://www.jb51.net/article/18220.htm)
target.addEventListener(type, listener, useCapture);
target 文檔節點、document、window 或 XMLHttpRequest。
type 字符串，事件名稱，不含「on」，比如「click」、「mouseover」、「keydown」等。
listener 實現了 EventListener 接口或者是 JavaScript 中的函數。
useCapture 是否使用捕捉，看了後面的事件流一節後就明白了，一般用 false
事件觸發時，會將一個 Event 對象傳遞給事件處理程序，比如：
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
適應的瀏覽器版本不同，同時在使用的過程中要注意
attachEvent方法 按鈕onclick IE中使用
addEventListener方法 按鈕click fox中使用
兩者使用的原理：可對執行的優先級不一樣，下面實例講解如下：
attachEvent方法，為某一事件附加其它的處理事件。（不支持Mozilla系列）
addEventListener方法 用於 Mozilla系列
舉例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果這樣寫,那麼將會只有medhot3被執行
寫成這樣：
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);執行順序為method3->method2->method1
如果是Mozilla系列，並不支持該方法，需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);執行順序為method1->method2->method3
W3C 及 IE 同時支持移除指定的事件, 用途是移除設定的事件, 格式分別如下:
W3C格式: removeEventListener(event,function,capture/bubble);
Windows IE的格式如下: detachEvent(event,function);
下面是例子, 與你寫的沒什麼區別的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DOMMouseScroll Event</title>
<script type="text/javascript">
window.onload = function() {
//滾輪ie和firefox的代碼不一樣：ie是mousewheel事件，firefox是dommousescroll事件事件屬性
//ie是 event.wheeldelta，firefox是event.detail屬性的方向值也不一樣，ie向上滾 > 0，firefox向下滾 > 0
if (window.addEventListener) {
//window.addEventListener != "undefined" 程序代碼可以判斷使用者的瀏覽器是否支持AddEventListener這個事件模型
window.addEventListener('DOMMouseScroll', wheel, false); //給firefox添加鼠標滾動事件
//window.addEventListener('DOMMouseScroll', backthis, false); // 必須按着Ctrl鍵才能改變圖片大小
} else {
window.onmousewheel = document.onmousewheel = wheel; //IE
//document.getElementById("divContent").attachEvent("onclick", function() { alert("test"); }); // attachEvent用於IE
}
}
function wheel(event) {
var content = document.getElementById("divContent");
if (!event) /* For IE. */
{
event = window.event;
}
if (event.wheelDelta) {
//event.wheelDelta,這個值，一旦你往上滾動一次鼠標，他就是120，如果你要是往下滾動一次，那麼它的值就是-120。
//這是一個是IE
if(event.srcElement.tagName=="IMG" && content.contains(event.srcElement))
{
event.srcElement.width += event.wheelDelta / 5;
var o = event.srcElement;
var zoom=parseInt(o.style.zoom, 10)||100; // 為什麼要加上 ||100 , 有什麼用的?
zoom+=event.wheelDelta/12;
if (zoom > 0) o.style.zoom = zoom + '%';
//css中的zoom屬性可以讓網頁或圖片實現放大縮小功能,比如你想讓網頁縮小為原來的一半
//那麼就在body中加入style="zoom:50%"或style="zoom:0.5%"，如：<body style="zoom:0.5">
return false;
}
}
else if (event.detail){
//如果是firefox
var allImg = content.getElementsByTagName("IMG");
var isThis=false; //現判斷鼠標中崙的元素是不是包含在那個div裡面
for (i = 0; i < allImg.length; i++) { //allImg.length -- 有多少個 img 標籤
if(allImg[i]==event.target){
isThis=true;
}
}
if(isThis && event.target.tagName=="IMG"){
event.target.width+=event.detail*10;return false;
}
};
}
function backthis(event) {
if (String(event.srcElement.tagName).toLowerCase() == 'img' && window.event.ctrlKey) {
o.style.zoom = "100%";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divContent" style="background-color:#ffee32">
<IMG src="App_Images/summer.jpg" alt="The picture can't display!" />
</div>
</form>
</body>
</html>
