| 点击数：605 | 回复数：1 |
| 作者：巨大八爪鱼 | |
| 最后回复：巨大八爪鱼 | |
| 最后回复时间：2010-12-4 19:05 | |
| 精品区：编程资料区 |
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>
