标签：
DOM0级事件处理程序
<!DOCTYPE html>
<html>
<head>
<title>DOM Level 0 Event Handler Example</title>
</head>
<body>
<input type="button" id="myBtn" value="Click Me" />
<input type="button" id="myRemoveBtn" value="Remove Event Handler" />
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(this.id);
};
var removeBtn = document.getElementById("myRemoveBtn");
removeBtn.onclick = function(){
btn.onclick = null;
};
</script>
</body>
</html>
DOM2级事件处理程序
<!DOCTYPE html>
<html>
<head>
<title>DOM Level 2 Event Handler Example</title>
</head>
<body>
<input type="button" id="myBtn" value="Click Me" />
<p>This example won‘t work in Internet Explorer.</p>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>DOM Level 2 Event Handler Example</title>
</head>
<body>
<input type="button" id="myBtn" value="Click Me" />
<input type="button" id="myRemoveBtn" value="Remove Event Handler" />
<script type="text/javascript">
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
var removeBtn = document.getElementById("myRemoveBtn");
removeBtn.onclick = function(){
btn.removeEventListener("click", handler, false); //works!
};
</script>
</body>
</html>
IE事件处理程序
<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer Event Handler Example</title>
</head>
<body>
<input type="button" id="myBtn" value="Click Me" />
<p>This example works only in Internet Explorer.</p>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert("Clicked");
});
btn.attachEvent("onclick", function(){
alert("Hello world!");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer Event Handler Example</title>
</head>
<body>
<input type="button" id="myBtn" value="Click Me" />
<input type="button" id="myRemoveBtn" value="Remove Event Handler" />
<script type="text/javascript">
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
btn.attachEvent("onclick", handler);
var removeBtn = document.getElementById("myRemoveBtn");
removeBtn.onclick = function(){
btn.detachEvent("onclick", handler);
};
</script>
</body>
</html>
跨浏览器的事件处理程序
<!DOCTYPE html> <html> <head> <title>Cross-Browser Event Handler Example</title> <script type="text/javascript" src="EventUtil.js"></script> </head> <body> <input type="button" id="myBtn" value="Click Me" /> <input type="button" id="myRemoveBtn" value="Remove Event Handler" /> <script type="text/javascript"> var btn = document.getElementById("myBtn"); var handler = function(){ alert("Clicked"); }; EventUtil.addHandler(btn, "click", handler); var removeBtn = document.getElementById("myRemoveBtn"); EventUtil.addHandler(removeBtn, "click", function(){ EventUtil.removeHandler(btn, "click", handler); }); </script> </body> </html>
var EventUtil = { addHandler: function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, getButton: function(event){ if (document.implementation.hasFeature("MouseEvents", "2.0")){ return event.button; } else { switch(event.button){ case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }, getCharCode: function(event){ if (typeof event.charCode == "number"){ return event.charCode; } else { return event.keyCode; } }, getClipboardText: function(event){ var clipboardData = (event.clipboardData || window.clipboardData); return clipboardData.getData("text"); }, getEvent: function(event){ return event ? event : window.event; }, getRelatedTarget: function(event){ if (event.relatedTarget){ return event.relatedTarget; } else if (event.toElement){ return event.toElement; } else if (event.fromElement){ return event.fromElement; } else { return null; } }, getTarget: function(event){ return event.target || event.srcElement; }, getWheelDelta: function(event){ if (event.wheelDelta){ return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); } else { return -event.detail * 40; } }, preventDefault: function(event){ if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; } }, removeHandler: function(element, type, handler){ if (element.removeEventListener){ element.removeEventListener(type, handler, false); } else if (element.detachEvent){ element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }, setClipboardText: function(event, value){ if (event.clipboardData){ event.clipboardData.setData("text/plain", value); } else if (window.clipboardData){ window.clipboardData.setData("text", value); } }, stopPropagation: function(event){ if (event.stopPropagation){ event.stopPropagation(); } else { event.cancelBubble = true; } } };
标签：
原文地址：http://www.cnblogs.com/fatoland/p/4918398.html
