代码改变世界

跨浏览器的事件绑定

2008-03-23 23:39  齐天大圣  阅读(130)  评论(0)    收藏  举报

 1function $(element)
 2{
 3    _arg = arguments;
 4    var result = [];
 5    if(arguments.length == 1) {
 6        if(Object.isString(_arg)) {
 7            return document.getElementById(element);
 8        }
 9        return element;
10    }
11    else {
12
13        for(var i=0;i<_arg.length;i++) {
14            result.push($(_arg[i]));
15        }
16        return result;
17
18    }
19
20}
21
22
23function observe(element,eventName,handler)
24{
25    element = $(element);
26
27    if(element.attachEvent) {
28        element.attachEvent("on" + eventName,handler);
29    }
30    else if(element.addEventListener) {
31        element.addEventListener(eventName,handler,true);
32    }
33
34}

示例程序（包含如何取消事件冒泡 )
<!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>
        <title>Untitled Page</title>
        <script type="text/javascript" src="jsLib/myLib.js"></script>
    </head>
    <body>
        <div>
            1
            <div>
                2
                <div>
                    3
                </div>
            </div>

        </div>
        <script type="text/javascript">
            //<![CDATA[
            var divs = document.getElementsByTagName("div");
            for(var i = 0 ;i<divs.length; i++) {
                observe(divs[i],"click",say);

            }

            function say(event)
            {
                alert(event.srcElement.innerHTML);
                if(event.stopPropagation) {
                    event.stopPropagation();

                }
                else {
                    event.cancelBubble = true; //取消冒泡
                }
            }


            //]]>
        </script>
    </body>
</html>