Javascript中的事件二

<!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>