<!------------------示例代码一--------------------->
<!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 />
</div>
</form>
</body>
</html>
相关文章：