Javascript 事件冒泡

时间：2023-03-08 18:11:39
<!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>

　　

相关文章