Javascript 事件冒泡

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div>
        <span></span>
        <ul>
            <li>nextSibling</li>
            <li>nextSibling</li>
            <li>nextSibling</li>
            <li>nextSibling</li>
            <li>nextSibling</li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function () {

        };
        function next(ele) {
            if (typeof ele.nextElementSibling == 'object') {
                return ele.nextElementSibling;
            }
            var n = ele.nextSibling;
            while (n) {
                if (n.nodeType == 1) {
                    return n;
                }
                n = n.nextSibling;
            }
            return n;
        }
        function fn(e) {
            e = e || window.event;
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }

            if (e.stopPropagation()) {
                e.stopPropagation();//标准浏览器阻止默认方式
            } else {
                e.returnValue = false;//IE的组织默认行为
            }
        }



        function fn2() {
            alert(this.nodeName);
        }
        var ele = document.getElementsByTagName('li');
        for (var i = 0; i < ele.length; i++) {
            ele.item(i).addEventListener('click', fn2, false);
        }


        document.body.addEventListener("click", fn2, false);

        document.body.addEventListener('click', fn, true);

        document.addEventListener('click', fn, true);

        //内到外 冒泡 IE支持
        //外到内 捕获 IE不支持
    </script>
</body>
</html>

  

posted @ 2015-08-03 15:05  ICupid  阅读(128)  评论(0编辑  收藏  举报