<!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. .NET开源工作流RoadFlow-表单设计-文本框

    点击表单设计器工具栏上的文本框按钮,会弹出文本框属性对话框: 绑定字段:该文本框与表单属性设置中选择的表的某个字段绑定(该文本框中的值将会保存到该字段中). 默认值:该文本框的初始化值. 宽度:文本框 ...

  2. VBA在WORD中给表格外的字体设置为标题

    使用VB可以将表外的字体设置标题字体实际操作如下: VB代码如下: Sub oliver_1() Selection.EndKey Unit:=wdStory '光标移到文末 To ActiveDoc ...

  3. hdu 2094 产生冠军

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2094 产生冠军 Description 有一群人,打乒乓球比赛,两两捉对撕杀,每两个人之间最多打一场比 ...

  4. 未能加载文件或程序集“System.Web.Razor”或它的某一个依赖项。文件或目录损坏且无法读取。

    “/”应用程序中的服务器错误. 未能加载文件或程序集“System.Web.Razor”或它的某一个依赖项.文件或目录损坏且无法读取. (异常来自 HRESULT:0x80070570) 说明: 执行 ...

  5. 条款3：尽可能地使用const

    如下为const修饰的几种类型: char name[] = "benxintuzi"; char* p1 = name;                // non-const ...

  6. WPF——数据绑定（二）绑定方法—绑定本地对象

    注意:本人初学WPF,文中表达或技术性问题请勿见怪,欢迎指正,谢谢 标记拓展语法:绑定到本地对象 什么是绑定到本地对象,我个人理解就是实现UI层上两个或多个控件的相互关联,一个控件的状态改变,导致另一 ...

  7. 小学生四则运算C/C++编程设计思想

    题目: 1.题目避免重复:        2.可定制(数量(打印方式)):        3.可控制下列参数:是否有乘除法.是否有括号.数值范围.加减有无负数.        除法有无余数.是否支持分 ...

  8. 【转载】openldap 备份与导入 及相关问题--扩展

    http://www.cnblogs.com/ccdc/p/3356518.html 摘要: 对openldap进行备份时,直接使用slapcat命令进行备份,使用ldapadd还原出现问题及解决. ...

  9. 转载—“Cache-control”常见的取值有private、no-cache、max-age、must-revalidate等

    转载自http://www.cnblogs.com/igin/archive/2008/05/04/1181056.html 网页的缓存是由HTTP消息头中的“Cache-control”来控制的,常 ...

  10. 第五周&第六周

    学习进度表  周数 专业学习目标 学习时间 新增代码行 博客发表量 人文方面学习 知识总结 第四周 认真掌握老师上课所讲的内容,在课外多学习一些知识    5小时 50          1   阅读 ...