<!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. hdu 5280 Senior's Array

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5280 Senior's Array Description One day, Xuejiejie ge ...

  2. Go support for Android

    Go support for Android David Crawshaw June 2014 Abstract We propose to introduce Go support for the ...

  3. sql server 查询数据库所有的表名+字段

    SELECT * FROM INFORMATION_SCHEMA.columns WHERE TABLE_NAME='Account' SELECT    (case when a.colorder= ...

  4. mysql查看日志

    工具:mysqlbinlog, 在bin目录中日志在data目录中 日志过滤:mysqlbinlog mysql-bin.000011 | less mysqlbinlog mysql-bin.000 ...

  5. OC中类的扩展介绍

    对OC类的扩展总结如下: 共有4个: 1.子类 subClass 作用:可以使用类的继承来增添父类的变量和方法. 写法:在.h文件中 @interface Student : Person 2.分类 ...

  6. TcpClient 错误"不能做任何连接，因为目标机器积极地拒绝它" 的解决

    TcpClient 错误"不能做任何连接,因为目标机器积极地拒绝它" 的解决 //以下是tcpclient服务器端的监听程序,假设服务器端和客户端在同一台机器上,//为了使客户端可 ...

  7. FPGA---ucf文件编写

    摘要:本文主要通过一个实例具体介绍ISE中通过编辑UCF文件来对FPGA设计进行约束,主要涉及到的约束包括时钟约束.群组约束.逻辑管脚约束以及物理属性约束. Xilinx FPGA设计约束的分类 Xi ...

  8. C++设计模式——代理模式

    前言 青春总是那样,逝去了才开始回味:大学生活也是在不经意间就溜走了,现在上班的时候,偶尔还会怀念大学时,大家在一起玩游戏的时光.大学喜欢玩游戏,但是可悲的校园网,速度能把人逼疯了:还好,后来搞了一个 ...

  9. Querying mergeinfo requires version 3 of the FSFS filesystem schema

    环境: jdk 1.7; svn  3.0.4;  TortoiseSVN 1.7.13 Subversion 1.7.10; IntelliJ IDEA 13.1.1;win7 64位系统 之前那个 ...

  10. Mac下安装Tomcat及配置

    今天介绍Mac下Tomcat的安装及配置: 1.在搜索引擎(如:必应或百度)中搜索“Tomcat”,第一条搜索结果就是Tomcat官方地址: 2.在左侧选择“Tomcat8”或“Tomcat9”,我这 ...