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

　　

Javascript 事件冒泡的更多相关文章

  1. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  2. 转：JavaScript事件冒泡简介及应用

    (本文转载自别处) JavaScript事件冒泡简介及应用   一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...

  3. JavaScript事件冒泡和事件委托

    JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...

  4. JavaScript事件——冒泡、捕获

    本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...

  5. Javascript事件冒泡机制

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...

  6. JavaScript事件冒泡简介及应用

    一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事 件处理程序或者事件返回true,那么这个 ...

  7. javascript事件冒泡

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...

  8. 解析Javascript事件冒泡机制(转) 本文转自：http://blog.csdn.net/luanlouis/article/details/23927347

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...

  9. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  10. 解析Javascript事件冒泡机制(转)

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...

随机推荐

  1. Windows Phone中Wallet钱包的使用

    前言 Windows Phone 8中加入了钱包Wallet这个功能,这个功能非常的有意思,开发者可以通过Wallet提供的API创建获取Wallet中的商品.统一管理用户的收集优惠券.信用卡.成员资 ...

  2. iOS学习之UI可视化编程-XIB

    一.Interface Builder可视化编程 1.Interface Builder简介: GUI:图形用户界面(Graphical User Interface,简称GUI,又称图形用户接口)是 ...

  3. 以Lockbits的方式访问bitmap

    转载自:http://www.cnblogs.com/xiashengwang/p/4225848.html 2015-01-15 11:38 by xiashengwang, 585 阅读, 0 评 ...

  4. 自定义jstl标签开发

    从jsp1.1开始就可以在jsp页面中使用自定义标签了,使用自定义标签不但可以实现代码重用,而且可以使jsp代码更简洁.Jsp2.0的标签扩展API中又增加了SimpleTag接口和其实现类Simpl ...

  5. 20145103JAVA第一次实验报告

    20145103<Java程序设计>第一次实验报告 实验内容及其步骤 一.命令行下java程序开发 建立一个java文件,然后在命令行中,对程序进行javac编译,就生成了.class文件 ...

  6. Windows桌面开发者的必备软件

    如果你新安装好了一台WindowsXP或者Windows7的机器,作为一个开发人员,我建议安装下面这些软件: 1,WinMerge. http://winmerge.org/ 2, Lua for w ...

  7. Workaround for Markdown blogging platform that to use LaTeX

    Here is a solution to solve the lack of LaTeX support: by using Codecogs API. For instance, if you n ...

  8. Spring项目跟Axis2结合

    本文的前提是已经有一个Spring的项目,在此基础上如何跟Axis2进行结合,开发出WebService服务和调用WebService服务. 1.开放WebService服务    1.引入必要的ja ...

  9. 跨平台base64数据传输注意问题

    今天用base64编码传输json串,android端那边始终看不到图片! 首先发现android端接收的json串长度不一致,仔细研究发现android端接收到的json数据里把服务器数据里的&qu ...

  10. 女性社区TOP10

    “女性和孩子的钱是世界上最好赚的”并不是一句空话.据统计,女性掌管着家庭70%的支出,如果你能让女性为你掏出腰包,那么你基本就掌控了一个家庭的大部分的消费. 有趣的是,女性还是一个喜欢分享的群体,他们 ...