<!------------------示例代码一--------------------->
<!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></title>
<script type="text/javascript">
(function (win) {
function $(id) {
return document.getElementById(id);
}
window.onload = function () {
//addEventListener和attachEvent都能给同一个元素绑定多个相同的事件处理程序（如下面分别为按钮btnOK1和btnOK2绑定了多个click事件），
//不同的是，addEventListener绑定的事件激发顺序是正序的，而attachEvent是倒序的。
Bind($("btnOK1"), "click", function (event) {
alert("绑定事件1");
manageEvent(event);
});
Bind($("btnOK1"), "click", function (event) {
alert("绑定事件2");
manageEvent(event);
});
Bind($("btnOK2"), "click", function (event) {
alert("绑定事件1");
manageEvent(event);
});
Bind($("btnOK2"), "click", function (event) {
alert("绑定事件2");
manageEvent(event);
});
//为测试事件冒泡，为div绑定一个事件
Bind($("divContainer"), "click", function () { alert("div单击事件"); });
}
function Bind(target, eventName, fun) {
if (target === undefined || target === null) return;
if (target.addEventListener) {
target.addEventListener(eventName, fun, false);
}
else {
target.attachEvent("on" + eventName, fun);
}
}
/*****************
*大多数浏览器中，事件冒泡可以通过事件对象的stopPropagation方法来停止，默认行为是通过preventDefault方法来阻止。
*而对于IE浏览器，则是通过设置cancelBubble属性为true、设置returnValue属性为false来实现。
*****************/
function manageEvent(e) {
//阻止事件冒泡
if (e.stopPropagation) e.stopPropagation(); //标准模型（或针对IE9以上浏览器版本）
else e.cancelBubble = true; //IE（或针对IE8以下版本）
//现在阻止任何默认动作
if (e.preventDefault) e.preventDefault(); //标准模型
else e.returnValue = false; //IE
}
})(window);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divContainer">
<input type="text" id="txt1" />
<input type="button" id="btnOK1" value="测试1" />
<input type="button" id="btnOK2" value="测试2" />
</div>
</form>
</body>
</html>
<!------------------示例代码二--------------------->
<!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></title>
<script type="text/javascript">
function regEventHandler(node,event,handler) {
if (node.addEventListener) {
node.addEventListener(event, handler, false);
}
else {
node.attachEvent("on" + event, handler);
}
}
window.onload = function () {
regEventHandler(document.getElementById("txt1"), "keypress", function (event) {
event = event || window.event;
var code = event.keyCode || event.charCode;
var target = event.target || event.srcElement;
if (code) {
alert("您按下了" + String.fromCharCode(code) + "(" + code + ")键。
触发此事件的元素是：" + target.nodeName);
}
});
regEventHandler(document.body, "mousedown", function (event) {
event = event || window.event;
var target = event.target || event.srcElement;
if (target) {
alert("您在" + target.nodeName + "元素上点击了鼠标。");
}
})
}
</script>
</head>
<body style="border:1px solid #999; height:1000px;">
<form id="form1" runat="server">
<div>
<input type="text" id="txt1" style="200px;" />
</div>
</form>
</body>
</html>